如何使用 create-react-app 设置 Jest Watch 插件

Question

想要实现一些“hooks”/笑话插件 to the tests I make with create-react-app.

\n\n

创建了一个 PoC 应用程序npx create-react-app jest-watch-plugins with this in the root

\n\n

./yourWatchPlugin.js

\n\n

class MyWatchPlugin {\n  apply(jestHooks) {\n    jestHooks.onTestRunComplete(results => {\n      console.log(\'Hello watcher\')\n    })\n  }\n}\n

\n\n

./jest.config.js

\n\n

// jest.config.js\nmodule.exports = {\n  // ...\n  watchPlugins: [\'./yourWatchPlugin\'],\n}\n

\n\n

然后我做了yarn test and saw no nothing being logged.

\n\n

然后我尝试了

\n\n

./package.json

\n\n

{\n  "name": "jest-watch-plugins",\n  "version": "0.1.0",\n  "private": true,\n  "dependencies": {\n    "react": "^16.9.0",\n    "react-dom": "^16.9.0",\n    "react-scripts": "3.1.1"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "react-scripts test",\n    "eject": "react-scripts eject"\n  },\n  "jest": {\n    "watchPlugins": [\n      "./yourWatchPlugin"\n    ]\n  },\n  "eslintConfig": {\n    "extends": "react-app"\n  },\n  "browserslist": {\n    "production": [\n      ">0.2%",\n      "not dead",\n      "not op_mini all"\n    ],\n    "development": [\n      "last 1 chrome version",\n      "last 1 firefox version",\n      "last 1 safari version"\n    ]\n  }\n}\n

\n\n

但它向我抛出了这个：

\n\n

$ yarn test \nyarn run v1.17.3\n$ react-scripts test\n\nOut of the box, Create React App only supports overriding these Jest options:\n\n  \xe2\x80\xa2 collectCoverageFrom\n  \xe2\x80\xa2 coverageReporters\n  \xe2\x80\xa2 coverageThreshold\n  \xe2\x80\xa2 coveragePathIgnorePatterns\n  \xe2\x80\xa2 extraGlobals\n  \xe2\x80\xa2 globalSetup\n  \xe2\x80\xa2 globalTeardown\n  \xe2\x80\xa2 moduleNameMapper\n  \xe2\x80\xa2 resetMocks\n  \xe2\x80\xa2 resetModules\n  \xe2\x80\xa2 snapshotSerializers\n  \xe2\x80\xa2 transform\n  \xe2\x80\xa2 transformIgnorePatterns\n  \xe2\x80\xa2 watchPathIgnorePatterns.\n\nThese options in your package.json Jest configuration are not currently supported by Create React App:\n\n  \xe2\x80\xa2 watchPlugins\n\nIf you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.\n\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n

\n\n

任何指向正确方向的指针都将受到赞赏。

\n\n

更新

\n\n

我试过这个

\n\n

{\n  "name": "jest-watch-plugins",\n  "version": "0.1.0",\n  "private": true,\n  "dependencies": {\n    "react": "^16.9.0",\n    "react-dom": "^16.9.0",\n    "react-scripts": "3.1.1"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "./node_modules/.bin/jest",\n    "eject": "react-scripts eject"\n  },\n  "jest": {\n    "watchPlugins": [\n      "./yourWatchPlugin"\n    ],\n    "rootDir": "src",\n    "transform": {\n      "^.+\\\\.tsx?$": "babel-jest"\n    },\n    "testRegex": "(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.jsx?$",\n    "moduleFileExtensions": [\n      "js",\n      "jsx",\n      "json",\n      "node"\n    ],\n    "moduleNameMapper": {\n      "\\\\.(jpg|jpeg|png|svg|css|less|scss)$": "<rootDir>/__jest__/fileMock.js"\n    }\n  },\n  "eslintConfig": {\n    "extends": "react-app"\n  },\n  "browserslist": {\n    "production": [\n      ">0.2%",\n      "not dead",\n      "not op_mini all"\n    ],\n    "development": [\n      "last 1 chrome version",\n      "last 1 firefox version",\n      "last 1 safari version"\n    ]\n  }\n}\n\n

\n\n

但它抛出

\n\n

$ yarn test                                                                                             Lasse Norfeldt\nyarn run v1.17.3\n$ ./node_modules/.bin/jest\n FAIL  src/App.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    This usually means that you are trying to import a file which Jest cannot parse, e.g. it\'s not plain JavaScript.\n\n    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".\n\n    Here\'s what you can do:\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/en/configuration.html\n\n    Details:\n\n    SyntaxError: /Users/norfeldt/Learning/Playgrounds/Jest/jest-watch-plugins/src/App.test.js: Unexpected token (7:18)\n\n       5 | it(\'renders without crashing\', () => {\n       6 |   const div = document.createElement(\'div\');\n    >  7 |   ReactDOM.render(<App />, div);\n         |                   ^\n       8 |   ReactDOM.unmountComponentAtNode(div);\n       9 | });\n      10 | \n\n      at Parser.raise (node_modules/@babel/parser/lib/index.js:6325:17)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        1.073s\nRan all test suites.\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n

\n

Answer 1

在您的 package.json 脚本中使用：

"test": "./../../node_modules/.bin/jest",

这将直接运行 Jest 二进制文件，并让您使用您喜欢的任何配置

如果您选择这条路线，您将需要在 package.json 中的 jest 配置中添加一些内容，例如：

  "jest": {
    "rootDir": "src",
    "transform": {
      "^.+\\.tsx?$": "babel-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$",
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|svg|css|less|scss)$": "<rootDir>/__jest__/fileMock.js"
    }
  },