如何在 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

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

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

Answer 2

总览

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

这个问题在上面的评论中已经指出。

这是发生的事情：

npm test在 package.json 中查找其中的内容scripts.test并运行它。对于 create-react-app 来说，就是react-scripts test. 反过来，它会运行 /node_modules/react-scripts/scripts/test.js（source）（您可以轻松地打印 debug 来查看发生了什么）。该脚本根据您的环境构建一个笑话配置。当您添加：

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

到，这取代了尝试创建的package.jsonjest 配置（是的！），但它也破坏了生成的参数（嘘！），所以 jest 认为您正在尝试传递测试模式（这显然不是有效的）测试模式）。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

TL; 博士

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

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

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

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

变化

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

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

• https://jestjs.io/docs/en/cli#using-with-yarn
• https://jestjs.io/docs/en/cli#using-with-npm-scripts

创建反应应用建立测试脚本中package.json使用

"test": "react-scripts test",

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

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

如果您想通过 CLI 发送选项，这样的事情可能会起作用。

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

# 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://medium.com/fhinkel/the-curious-case-of-double-dashes-b5e7711698f