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

Question

我想将我的 jest 配置移出我的 package.json，我正在尝试按照此处的建议使用 --config 但得到错误argv.config.match is not a function

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

Answer 1

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

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

Answer 2

TL; 博士

在您的选项之前添加-- 。

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

如果您想通过 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 3

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

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

Answer 4

域名

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

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

和

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

• 使用npm test正常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任何scripts.test并运行它。 对于 create-react-app，就是react-scripts test 。 这反过来又运行/node_modules/react-scripts/scripts/test.js ( source )（您可以轻松打印 debug this 以查看发生了什么）。 此脚本会根据您的环境构建一个 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似乎在构建“正确”配置方面遇到了很多麻烦； 我绝对没有试图弄清楚所有这些：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 5

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

Answer 6

这个也给我了！ create react app 有点棘手，因为它已经包含了笑话。 我删除了--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

对我来说，以上答案都没有奏效。 但是在文档的帮助下，我找到了解决方法。 为此，将要配置 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"]
  }