MENU


Jest with Create React App

If you use Create-React-App, Jest is already included out of the box with useful defaults.

Look at the original package.json file:

As you can see, Jest has already been included as a dependency. React Testing Library (34.5) is specified by "@testing-library/react": "^11.2.7".
RESETRUNFULL
{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }}

Notice there is also a default test file named 'App.test.js':


RESETRUNFULL
import { render, screen } from '@testing-library/react';import App from './App';test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();});

To run the tests in 'App.test.js', execute on the command line 'npm test'. This will start the Jest task runner, watching for changes and running the tests automatically.

By default, Jest will look for test files with any of the following popular naming conventions in the current folder and its sub-folders:

Files with a .js, .jsx, .ts or .tsx suffix in __tests__ folders.

Files with a .test.js suffix.

Files with a .spec.js suffix.

The test.js and spec.js files.