How to use jest.config.js with create-react-app

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

> [email protected] 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.

Solution 1

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

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

Solution 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

Solution 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"
    ]
  },

Solution 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. E.g., 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'
]

View more solutions