如何在 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"]
  }