如何将 jest.config.js 与 create-react-app 一起使用

Question

我想将我的 jest 配置从我的 package.json 中移出，我正在尝试按照建议使用 --config here 但收到错误 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

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

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

Answer 2

tldr

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

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

与

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

• 使用npm test 正常运行测试

一切

添加-- --config=jest.config.js 对我来说有点工作：我的测试通过了，但后来我收到以下错误（截断）：

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

comment above 中指出了这个问题。

这是怎么回事：

npm test 在 package.json 中查找 scripts.test 中的任何内容并运行它。对于 create-react-app，那是 react-scripts test。这反过来运行 /node_modules/react-scripts/scripts/test.js (source) （您可以轻松打印调试此内容以查看发生了什么）。此脚本会根据您的环境构建一个笑话配置。添加时：

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

到package.json，这取代了react-scripts test 试图创建的开玩笑配置（是的！），但它也消除了"test": "react-scripts test" 生成的参数（嘘！），所以开玩笑认为你正在尝试传入一个测试模式（这显然不是一个有效的测试模式）。

所以，我决定尝试使用 jest CLI 运行我的测试。至少对我来说，它运行良好，并且完成了我所有的测试。它会自动查找jest.config.js，这样就可以了，您可以传入--watch 以获得与react-scripts test 相同的行为。

请记住，react-scripts test 似乎在构建“正确”配置方面遇到了很多麻烦；我绝对没有试图弄清楚所有这些：YMMV。这是它在我的环境中创建的全套选项。例如，对于--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 3

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

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

Answer 4

对我来说，以上答案都不起作用。但是在文档的帮助下，我找到了解决方法。 为此，请将要配置 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(),
})

还有一点很重要，react v16 需要使用 enzyme-adapter-react-16，react v15 需要使用 enzyme-adapter-react-15

另外，如果要使用enzyme-to-json，可以将以下代码放入package.json文件中

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

Answer 5

TL;DR

在您的选项前添加--。

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

变化

将选项传递给脚本的方式因 npm 或 纱线您使用。为了完整起见，以下是变体的结果：

# 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",

如果您想通过 CLI 发送选项，类似的方法可能会起作用。

"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

Answer 6

这个也吸引了我！创建反应应用程序有点棘手，因为它已经包含了笑话。我删除了 --config jest.config.js 行，并且不需要那个额外的 test.config 文件。

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

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

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

Answer 7

我会尝试将"test": "jest --no-cache -w 2" 添加到您的 package.json 中。然后运行npm run test