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

Question

我希望将我的jest配置从package.json中分离出来，我试图使用--config选项，如此处建议的那样, 但是会收到错误信息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",
  },

命令行界面

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.

- Jamie Hutber

---

我也遇到了同样烦人的问题，但是没有找到解决方案。最终我通过 package.json 配置 jest 来解决问题。https://create-react-app.dev/docs/running-tests/#configuration - Shmygol

Answer 1

对于我来说，追加-- --config=jest.config.js有效。

所以在您的情况下，整个字符串为react-scripts test -- --config jest.config.js。

- McTrafik

Answer 2

简述：

在选项前加上--。

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

---

这里的问题出现在react-scripts无法看到传递给它的选项。我们可以通过直接运行它来证明这一点。

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

如何向脚本传递选项取决于您使用的 npm 或 Yarn 的版本。为了完整起见，这里是各种变化的结果：

# 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 会在package.json中设置测试脚本。

"test": "react-scripts test",

您可以这样设置其他选项。

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

如果你想通过命令行界面发送选项，这样做可能是可行的。

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

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

资源

以下是一些资源，以解释不同的用法。

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

- reergymerej

---

当我执行这个操作时出现错误 - 无效的testPattern --config=jest.config.js|--coverage=true|--watch|--config|{"roots":["<rootDir>/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles"......，所以改为运行所有测试。 - Chasen Bettinger

我怀疑当你添加了 --config 参数时，它会忽略默认与 create-react-app 捆绑的 Jest 配置。 - papiro

@ChasenBettinger，这是因为您在使用yarn。 - papiro

我在设置 testURL（jest 在请求中用作 origin 的 location.href）时遇到了“Invalid testPattern”错误。最终我使用 DEBUG_PRINT_LIMIT=20000 react-app-rewired test --testURL http://origin.domain.com 来解决问题。 - Cody Moniz

@ChasenBettinger 关于“无效的testPattern”错误，这是我所做的：https://dev59.com/X1IH5IYBdhLWcg3wYtAS#68912023 - Hawkeye Parker

@reergymerej，你有什么想法可以修复第一条评论中的错误吗？ - Anthony

Answer 3

对我来说，在package.json文件中添加jest作为键起了作用。将所有必需的配置作为对象添加到jest键中，而不是使用jest.config.js文件。

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

- Nikita Kumari

---

这是理想的配置方式，我认为 CRA 希望您采用这种方式进行配置。问题在于某些选项不受 package.json 的支持（例如 haste）。 - Cameron

Answer 4

tldr

• npm install jest --save-dev（不确定是否需要--我只是这样做了）。
• 替换

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

随着

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

• 使用 npm test 正常运行测试

一切

对我来说，添加 -- --config=jest.config.js 似乎有所作用：我的测试通过了，但随后我收到了以下错误信息（被截断）：

• 使用npm test正常运行测试

一切

对我来说，添加-- --config=jest.config.js似乎有一定作用：我的测试通过了，但是随后我遇到了以下错误（被截断）：

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

这个问题在上面的评论中有提到。

以下是发生的事情：

npm test会查找package.json中scripts.test的内容并运行它。对于create-react-app，这是react-scripts test。接着，它会运行/node_modules/react-scripts/scripts/test.js (源代码)来构建一个基于你的环境的jest配置。当你添加:

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

对于package.json，它替代了react-scripts test试图创建的jest配置（好！），但它也篡改了"test": "react-scripts test"生成的参数（坏！），因此jest认为您正在尝试传递一个测试模式（这显然不是一个有效的测试模式）。

因此，我决定尝试使用jest CLI运行我的测试。至少对我来说，它能很好地运行并且捕获了所有的测试。它自动查找jest.config.js，所以它可以正常工作，并且您可以传递--watch，以获得与react-scripts test相同的行为。

请记住，react-scripts test似乎要经过很多麻烦来构建一个“合适”的配置；我肯定没有尝试解决所有这些问题：可能会有不同的结果。以下是它在我的环境中创建的完整选项集。例如，对于--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'
]

- Hawkeye Parker

Answer 5

对我来说，上述所有答案都不起作用。但是在文档的帮助下，我找到了解决方法。 为此，将您想要配置jest的代码放在your_project_root_folder/src/setupTests.js中。我的your_project_root_folder/src/setupTests.js看起来像这样。

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

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

还有一个重要的点，你需要使用enzyme-adapter-react-16来适配react v16，并使用enzyme-adapter-react-15来适配react v15

此外，如果你想使用enzyme-to-json，可以将以下代码放置在package.json文件中

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

- Tanzeel Ahmed

Answer 6

这个问题也困扰了我！create react app有点棘手，因为它已经包含了jest。我删除了--config jest.config.js这一行，并且不需要那个额外的test.config文件。

我还确保我的enzyme文件命名为setupTests.js。测试模块将专门寻找运行该文件，因此必须命名为这个。另外，我必须将其放在src/文件夹中，之前我将其放在了src/test文件夹中。如果您正在问上面的问题，您可能已经超过了这个点，但还是想提一下。我的setupTests.js看起来像：

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

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

- DORRITO

---

这个答案对我有用，显然也对其他人有用，比如下面的Tanzeel（他有相同的解决方法，但是还有一些额外的注释）。 - DORRITO

Answer 7

我建议你在 package.json 中添加 "test": "jest --no-cache -w 2" ，然后运行 npm run test。

- Samuel Wood