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

> 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.

I have the same annoying problem and didn't find the solution. I ended up configuring jest with the package.json https://create-react-app.dev/docs/running-tests/#configuration — Shmygol, Oct 23 '21 at 11:52

score 38 · Accepted Answer · edited Jul 26 '21 at 07:52

38

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

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

edited Jul 26 '21 at 07:52

Jamie Hutber

26,790
46
179
291

answered Apr 27 '20 at 21:26

McTrafik

2,843
3
29
31

score 17 · Answer 2 · answered Aug 01 '20 at 17:30

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

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

I get an error when I do this - `Invalid testPattern --config=jest.config.js|--coverage=true|--watch|--config|{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles"...... Running all tests instead` — Chasen Bettinger, Dec 29 '20 at 20:52
I suspect that when you add `--config`, it ignores the jest config which comes bundled by default with create-react-app. — papiro, May 04 '21 at 13:37
I was getting the `Invalid testPattern` error while trying to set testURL (the location.href that jest uses as the origin in requests (for CORS). I ended up doing `DEBUG_PRINT_LIMIT=20000 react-app-rewired test --testURL http://origin.domain.com` — Cody Moniz, May 13 '21 at 22:51
@ChasenBettinger regarding the "Invalid testPattern" error, this is what I did: https://stackoverflow.com/a/68912023/99717 — Hawkeye Parker, Aug 24 '21 at 17:57
@reergymerej any thoughts how to fix the error from the first comment — Anthony, Sep 14 '21 at 18:22

Nikita Kumari · Answer 3 · 2021-09-03T12:49:02.753

13

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

edited Sep 03 '21 at 12:49

answered Sep 03 '21 at 08:25

Nikita Kumari

309
3
7

1

This is ideal and I think how CRA would prefer you configure it. The problem is that certain options aren't supported from the package.json (i.e. `haste`) – Cameron Jun 21 '22 at 17:46

score 12 · Answer 4 · answered Aug 24 '21 at 17:56

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'
]

DORRITO · Answer 5 · 2020-04-06T21:49:07.567

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()
})

This answer worked for me, and obviously worked for others such Tanzeel below me (as he has the same fix, but with some extra notes). — DORRITO, Nov 09 '22 at 20:57

Tanzeel Ahmed · Answer 6 · 2021-05-02T16:34:59.850

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

score -4 · Answer 7 · answered Mar 03 '20 at 00:49

-4

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

answered Mar 03 '20 at 00:49

Samuel Wood

1

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

package.json

cli

7 Answers7

Variations

Resources

Linked