MENU


Jest with Create React App

Note: Create React App was officially deprecated on the React blog in February 2025 and is no longer recommended for new projects — modern React apps typically use Vite, Next.js, or another current toolchain. Everything below about Jest itself still applies, with minor configuration differences, in those setups; this page remains useful mainly for maintaining existing Create React App projects.

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

Look at the original package.json file (version numbers reflect Create React App's last release and are now frozen):

As you can see, Jest has already been included as a dependency. React Testing Library is specified by "@testing-library/react": "^11.2.7".
{
  "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':


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.