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

Question

想为我使用 create-react-app 进行的测试实现一些“钩子”/jest plugins。

在根目录中创建了一个 PoC 应用 npx create-react-app jest-watch-plugins

./yourWatchPlugin.js

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

./jest.config.js

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

然后我做了yarn test 并没有看到任何记录。

然后我尝试了

./package.json

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

但它向我抛出了这个：

$ yarn test 
yarn run v1.17.3
$ react-scripts test

Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • coveragePathIgnorePatterns
  • extraGlobals
  • globalSetup
  • globalTeardown
  • moduleNameMapper
  • resetMocks
  • resetModules
  • snapshotSerializers
  • transform
  • transformIgnorePatterns
  • watchPathIgnorePatterns.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • watchPlugins

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

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

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

更新

我试过了

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

但它会抛出

$ yarn test                                                                                             Lasse Norfeldt
yarn run v1.17.3
$ ./node_modules/.bin/jest
 FAIL  src/App.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    SyntaxError: /Users/norfeldt/Learning/Playgrounds/Jest/jest-watch-plugins/src/App.test.js: Unexpected token (7:18)

       5 | it('renders without crashing', () => {
       6 |   const div = document.createElement('div');
    >  7 |   ReactDOM.render(<App />, div);
         |                   ^
       8 |   ReactDOM.unmountComponentAtNode(div);
       9 | });
      10 | 

      at Parser.raise (node_modules/@babel/parser/lib/index.js:6325:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.073s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

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

Answer 2

Jest 自带默认 watcher，你需要配置一下。