Create-react-app: How do i use jest with create react app

Created on 19 Jun 2017  路  13Comments  路  Source: facebook/create-react-app

Hi, it says in the documentation that create-react-app uses jest. I tried using it directly with npm test and setting jest as my test in package.json, but it says jest isn't recognized. I installed jest and then tried to run the test again, it shows me error on es6 import and export functionalities.

What is the actual way of using jest with create-react-app. Thank you.

question

Most helpful comment

Btw if you use Yarn 1.0+ you don't need the extra -- there. Just yarn test --coverage is good.

All 13 comments

it's configured by default under the hood. no need to install it.
the default configuration is also more than enough in most common situation.

BTW, is there any special case you wanna do?
basically to run test, you just need to type npm test.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-test

You shouldn't need to change anything to use Jest!

If you changed the test script in your package.json, please revert that.

I'll close this, but please let us know if you need more help!

Hi, I created a new app and it works out of the box now. Could not quite figure out why the last one didn't work. Thanks

Maybe you were using npm@5 which is currently buggy, and maybe it hasn't installed Jest properly.

The Jest test runner is unable to resolve absolute path imports inside my component to be tested.

image

In case someone (like me) only wants to use Jest's --coverage option, it can be used with CRA:

yarn test -- --coverage

See #coverage-reporting

Btw if you use Yarn 1.0+ you don't need the extra -- there. Just yarn test --coverage is good.

@pRoy24 I'm having the same problem. Did you solve it?

When I import a component that uses absolute paths the test fails to run with:

    TypeError: (0 , _utils.makeActionCreator) is not a function

However when I use a component that does not use absolute paths such as:(https://github.com/facebook/jest/blob/master/examples/snapshot/Link.react.js), the test runs fine.

  System:
    OS: macOS High Sierra 10.13.3
    CPU: x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
  Binaries:
    Node: 8.11.0
    Yarn: 1.5.1
    npm: 5.8.0

If anyone is having the same problem as me and pRoy24, I solved it by adding this option --modulePaths=src to package.json test script.

package.json

  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom --modulePaths=src",
    "eject": "react-scripts-ts eject"
  },

src being the root folder name of your code :)

I have installed jest
I tried npm test command to run test cases but unfortunately am facing below issue
any solutions

Error: Cannot find module 'E:ReactTestingTestProjectmy-app1 - loginappcopynode_modulesjest-cli'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at getJest (E:ReactTestingTestProjectmy-app1 - loginappcopynode_modulesreact-scriptsnode_modulesjestnode_modulesjest-clibuildcligetJest.js:22:12)
at Object.run (E:ReactTestingTestProjectmy-app1 - loginappcopynode_modulesreact-scriptsnode_modulesjestnode_modulesjest-clibuildcliindex.js:39:48)
at Object. (E:ReactTestingTestProjectmy-app1 - loginappcopynode_modulesreact-scriptsscriptstest.js:104:6)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
npm ERR! Test failed. See above for more details.

might be worth removing node_modules/ and re-install using npm install

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ap13p picture ap13p  路  3Comments

DaveLindberg picture DaveLindberg  路  3Comments

rdamian3 picture rdamian3  路  3Comments

adrice727 picture adrice727  路  3Comments

wereHamster picture wereHamster  路  3Comments