如何在 create-react-app 中使用 jest.config.js

Question

I would like to move my jest config out of my package.json, i am trying to use the --config as suggested here but get the error argv.config.match is not a function

package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --config jest.config.js",
    "eject": "react-scripts eject",
  },

cli

hutber@hutber-mac:/var/www/management/node$ npm test -u

> management-fresh@0.1.0 test /var/www/management/node
> react-scripts test --config jest.config.js

Usage: test.js [--config=<pathToConfigFile>] [TestPathPattern]


argv.config.match is not a function
npm ERR! Test failed.  See above for more details.

Answer 1

For me appending -- --config=jest.config.js worked.

So the whole string react-scripts test -- --config jest.config.js in your case.

Answer 2

TL;DR

Add -- before your options.

"test": "react-scripts test -- --config=jest.config.js",

---

The problem here is with react-scripts not seeing the options being passed to it. We can demonstrate this by running it directly.

./node_modules/.bin/react-scripts test --config=jest.config.js
# argv.config.match is not a function

./node_modules/.bin/react-scripts test -- --config=jest.config.js
# This works.

Variations

How you pass options to scripts varies depending on which versions of npm or Yarn you use. For completeness, here are the results for the variations:

# This runs, but completely ignores the option.
npm test --config=jest.config.js

# These result in "argv.config.match is not a function," indicating that the
# options were not understood.
npm test -- --config=jest.config.js
yarn test -- --config=jest.config.js
yarn test --config=jest.config.js

• https://jestjs.io/docs/en/cli#using-with-yarn
• https://jestjs.io/docs/en/cli#using-with-npm-scripts

create react app sets up the test script in package.json with

"test": "react-scripts test",

You can set additional options like so.

"test": "react-scripts test -- --config=jest.config.js",

Something like this might work if you want to send options through the CLI.

"test": "react-scripts test --",

yarn test --bail
# comes through as
react-scripts test -- --bail

Resources

Here are a few resources to explain the different usage.

• https://medium.com/fhinkel/the-curious-case-of-double-dashes-b5e7711698f

Answer 3

For me adding jest as key in package.json file worked. Added all the required config as object in jest key rather than jest.config.js

"jest": {
    "collectCoverageFrom": [
      "src/**/*.js",
      "!**/node_modules/**"
    ],
    "coverageReporters": [
      "text-summary",
      "lcov",
      "cobertura"
    ],
    "testMatch": [
      "**/*.test.js"
    ]
  },

Answer 4

tldr

• npm install jest --save-dev (not sure if this is required -- I just did it).
• replace

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

with

"scripts": {
    ...
    "test": "jest --watch",
    ...
  },

• run tests as normal with npm test

Everything

Adding -- --config=jest.config.js sort of work for me: my tests passed, but then I was getting the following error (truncated):

Invalid testPattern --config=jest.config.js|--watch|--config|{"roots":["<rootDir>/src"]
...
Running all tests instead.

This problem is noted in the comment above .

Here's what's going on:

npm test looks in package.json for whatever is in scripts.test and runs that. For create-react-app, that's react-scripts test . This, in turn, runs /node_modules/react-scripts/scripts/test.js ( source ) (you can easily print debug this to see what's going on). This script builds up a jest configuration based on your environment. When you add:

"test": "react-scripts test -- --config=jest.config.js",

to package.json , this replaces the jest config that react-scripts test is trying to create (yea!), but it also munges the arguments that "test": "react-scripts test" generates (boo!), so jest thinks you're trying to pass in a test pattern (which is obviously not a valid test pattern).

So, I decided to try running my tests using the jest CLI. At least for me, it worked fine and picked up all of my tests. It automatically looks for jest.config.js , so that works, and you can pass --watch in to get the same behavior as react-scripts test .

Keep in mind that react-scripts test seems to be going through a lot of trouble to build up a 'proper' config; I definitely haven't tried to figure all of that out: YMMV. Here's the full set of options it creates in my env. Eg, for --config the next element in the array is the config.

[
  '--watch',
  '--config',
  '{"roots":["<rootDir>/src"],
      "collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"],
      "setupFiles":["<my_root_elided>/node_modules/react-app-polyfill/jsdom.js"],
      "setupFilesAfterEnv":["<rootDir>/src/setupTests.js"],
      "testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
        "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
      "testEnvironment":"jsdom",
      "testRunner":"<my_root_elided>/node_modules/jest-circus/runner.js",
      "transform":{
        "^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$":"<my_root_elided>/node_modules/react-scripts/config/jest/babelTransform.js",
        "^.+\\\\.css$":"<my_root_elided>/node_modules/react-scripts/config/jest/cssTransform.js",
        "^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"<my_root_elided>/node_modules/react-scripts/config/jest/fileTransform.js"},
      "transformIgnorePatterns":["[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$",
        "^.+\\\\.module\\\\.(css|sass|scss)$"],
      "modulePaths":[],
      "moduleNameMapper":{"^react-native$":"react-native-web",
      "^.+\\\\.module\\\\.(css|sass|scss)$":"identity-obj-proxy"},
      "moduleFileExtensions":["web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node"],
      "watchPlugins":["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
      "resetMocks":true,
      "rootDir":"<my_root_elided>"}',
  '--env',
  '<my_root_elided>/node_modules/jest-environment-jsdom/build/index.js'
]

Answer 5

I would try adding "test": "jest --no-cache -w 2" to your package.json. Then run npm run test

Answer 6

This one got me too! create react app is a bit tricky as it already contains jest. I removed the --config jest.config.js line, and didn't need that extra test.config file.

I also made sure my enzyme file was named setupTests.js. The testing module will be specifically looking to run that file, so it must be named that. Also,I had to have it in my src/ folder, where before I had it in a src/test folder. If you are asking the above question you are probably past this point, but wanted to mention just in case. My setupTests.js looks like:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({
  adapter: new Adapter()
})

Answer 7

For me, none of the above answers worked. But with the help of documentation, I found out the way around. For this purpose, place the code you want to configure jest, in your_project_root_folder/src/setupTests.js . My your_project_root_folder/src/setupTests.js looks like this

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({
    adapter: new Adapter(),
})

And one more important point, you need to use enzyme-adapter-react-16 for react v16 and enzyme-adapter-react-15 for react v15

Moreover, if you want to use enzyme-to-json , you can place the following code in package.json file

  "jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
  }