70

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.
Improve this question
1

7 Answers 7

Reset to default
42

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

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

18

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.

Improve this answer

6 Comments

I get an error when I do this - Invalid testPattern --config=jest.config.js|--coverage=true|--watch|--config|{"roots":["<rootDir>/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles"...... Running all tests instead
I suspect that when you add --config, it ignores the jest config which comes bundled by default with create-react-app.
@ChasenBettinger, it's because you're using yarn
@ChasenBettinger regarding the "Invalid testPattern" error, this is what I did: stackoverflow.com/a/68912023/99717
@reergymerej any thoughts how to fix the error from the first comment
|
15

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'
]
Improve this answer

Comments

15

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

1 Comment

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)
-2

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()
})
Improve this answer

1 Comment

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

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"]
  }
Improve this answer

Comments

-4

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.