Jest from create-react-app not running on Windows

Question

I have a problem running Jest from a clean installed app created using create-react-app on Windows 8.1. After the installation, running the command npm run test, I get the error:

No tests found related to files changed since last commit.

Running jest --watchAll, so bypassing the react-scripts, in the same directory, though, shows:

Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

SyntaxError: E:\demo\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 | });

Googling for quite while and following people's suggestions on similar issues, I started adding Babel devDependencies on my package.json. And it became like this:

"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@babel/runtime": "^7.2.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-root-import": "^6.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-optimize": "^1.0.1",
    "jest-transform-stub": "^1.0.0"
  }

I also added the .babelrc file as:

{
    "presets": [
        "@babel/react" ,
        "@babel/env"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
 }

And no matter the combinations I try, I always get different errors and this can't be right. Looking at people on the internet, all are able to use the Jest command out of the box with create-react-app.

The last try with all those dependencies results in the following error:

Test suite failed to run

    E:\dev\demo\src\App.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                                    ^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Any ideas?! I am baffled.

Answer 1

create-react-app is CLI that generates react-scripts pre-configured setup that includes Webpack and Jest configuration, among other things.

When Jest is used directly as jest, it ignores generated configuration and requires to be configured from scratch.

npm test (defaults to react-scripts test in CRA setup) should be used instead of jest to make use of generated Jest configuration.

In case the problem with npm test is interactive mode:

No tests found related to files changed since last commit. Press a to run all tests, or run Jest with --watchAll

It can be addressed with npm test a.