Jest from create-react-app not running on Windows

user_979010 0
Viewed 7086

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.

babel-jest babeljs create-react-app jestjs reactjs
3 Answers

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.

user_37315010

Just to clarify the answer of @estus-flask.
There are 2 solutions.

First Solution:

package.json

"scripts": {
  "test": "react-scripts test --watchAll",
  ...
},

And then run

npm test

Second Solution:

Or when you run the tests, run them like this:

npm test .
user_148190650

In my case, I am running a an Azure DevOps pipeline, to build and deploy a react app to Azure app service. So I used the following script task to do npm install, npm build and then test as follows.

- script: |
    echo Working dir and file list are as follows.
    echo -----------------------------------------
    pwd
    ls -la
    echo Changing directory to reactonazure
    ehco ----------------------------------
    cd reactonazure
    echo Working dir and file list now after chaning directory are as follows.
    echo ---------------------------------------------------------------------
    pwd
    ls -la
    echo Running npm install
    echo -------------------
    npm install
    echo Running npm build --if-present
    echo ------------------------------
    npm run build --if-present
    echo Running CI=true npm test
    echo ------------------------             
    CI=true npm test
  displayName: 'npm install, build and test'

You can ignore echo, ls, pwd and cd statements. The point in focus it the last one

CI=true npm test

That finally started working. Earlier I had

npm run test --if-present

which gave me the error.

No tests found related to files changed since last commit.
user_19778710
Related