How to test a React App, with Jest and react-testing-library
Prerequisites: An existing React app.
You can find the full source code @ github: https://github.com/alexadam/project-templates/tree/master/projects/react-app-tests
Setup
Install Jest and react-testing-library
yarn add --dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom
In the project's root folder, create a file named jest.config.js
and add:
module.exports = {
roots: ["./src"],
transform: {
"^.+\\.tsx?$": "ts-jest"
},
testEnvironment: 'jest-environment-jsdom',
setupFilesAfterEnv: [
"@testing-library/jest-dom/extend-expect"
],
testRegex: "^.+\\.(test|spec)\\.tsx?$",
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
};
Update package.json
by adding a new script entry:
"scripts": {
...
"test": "jest",
...
Create a Test
We'll test the basic React app created from scratch here: https://alexadam.dev/blog/create-react-project.html
To test the Numbers component, create a file named numbers.test.tsx
, in the src
folder:
import React, { Props } from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import Numbers from "./numbers";
describe("Test <Numbers />", () => {
test("Should display 42", async () => {
render(<Numbers initValue={42} />);
const text = screen.getByText("Number is 42");
expect(text).toBeInTheDocument();
});
test("Should increment number", async () => {
const { container } = render(<Numbers initValue={42} />)
const incButton = screen.getByText('+')
fireEvent(
incButton,
new MouseEvent('click', {
bubbles: true,
cancelable: true,
}),
)
const text = screen.getByText("Number is 43");
expect(text).toBeInTheDocument();
});
test("Should decrement number", async () => {
const { container } = render(<Numbers initValue={42} />)
const decButton = screen.getByText('-')
fireEvent.click(decButton)
const text = screen.getByText("Number is 41");
expect(text).toBeInTheDocument();
});
});
Run the tests:
yarn test
See the results:
$> yarn test
yarn run v1.22.17
$ jest
PASS src/numbers.test.tsx
Test <Numbers />
✓ Should display 42 (29 ms)
✓ Should increment number (14 ms)
✓ Should decrement number (8 ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 2.893 s
Ran all test suites.
✨ Done in 3.88s.
Top comments (0)