Jest with Create React App: Test suite failed to run - Unexpected token

Question

Out of the box create-react-app with jest is always failing

Steps I did

create-react-app cra-test
cd cra-test
yarn install

Changed the original test in package.json into this

{
  "name": "cra-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  }
}

When I run yarn test the test failed. Here's the output

yarn run v1.1.0
$ jest
FAIL  src\App.test.js
  ● Test suite failed to run

    .../cra-test/src/App.test.js: Unexpected token (7:18)
         5 | it('renders without crashing', () => {
         6 |   const div = document.createElement('div');
      >  7 |   ReactDOM.render(<App />, div);
           |                   ^
         8 |   ReactDOM.unmountComponentAtNode(div);
         9 | });
        10 |

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.413s, estimated 12s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have read that this might be caused by upgrading Jest that it become incompatible with create-react-app, but I did not do such thing.

node --version && yarn --version && npm --version && create-react-app --version
v6.10.2
1.1.0
5.7.1
1.4.3

Answer 1

Unless you eject create-react-app, you have neither babel config nor jest config in your root dir, hence jest doesn't know it has to transpile sources. So you have to create .babelrc:

{
 "presets": [
   "react-app"
  ]
}

and jest.config.js:

module.exports = {
  "collectCoverageFrom": [
    "src/**/*.{js,jsx,mjs}"
  ],
  "setupFiles": [
    "<rootDir>/config/polyfills.js"
  ],
  "testMatch": [
    "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
    "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
  ],
  "testEnvironment": "node",
  "testURL": "http://localhost",
  "transform": {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
    "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
  },
  "transformIgnorePatterns": [
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
  ],
  "moduleNameMapper": {
    "^react-native$": "react-native-web"
  },
  "moduleFileExtensions": [
    "web.js",
    "mjs",
    "js",
    "json",
    "web.jsx",
    "jsx",
    "node"
  ]
}

These configs you can find after you do npm run eject.

babel-preset-react-app should be installed since jest config refers to it. Also, note that jest config mentions config directory which is a part of create-react-app. Which means it's not going to work without it, so you need to copy that dir from create-react-app or write your own setup files.

Answer 2

Test Suites: 0 of 1 total FAIL src/App.test.js
× renders learn react link (6ms)

● renders learn react link

ReferenceError: React is not defined

  3 |
  4 | test('renders learn react link', () => { 
> 5 |   render(<App />);
    |          ^
  6 |   const linkElement = screen.getByText(/learn react/i);
  7 |   expect(linkElement).toBeInTheDocument();
  8 | });

  at Object.<anonymous> (src/App.test.js:5:10) 

Test Suites: 1 failed, 1 total Tests: 1 failed, 1 total Snapshots: 0 total Time: 6.378s, estimated 17s Ran all test suites. Determining test suites to run... --watch is not supported without git/hg, please use --watchAll