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

Question

想要为我用create-react-app进行的测试实现一些“ hooks” / jest插件 。

在根目录中创建了一个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附带了默认观察程序，您必须对其进行配置。