Create React App中Jest覆盖率相关配置不生效

你使用的Create React App（即react-scripts脚手架）内部封装了完整的Jest默认配置，默认不会加载项目根目录下自定义的jest.config.js/jest.config.ts文件。你写在独立配置文件里的规则根本没有被Jest读取，所以无论修改文件后缀、调整glob匹配规则，配置都不会生效。
你额外安装的ts-jest属于冗余依赖，CRA已经内置了TypeScript文件的Jest转译支持，额外安装反而可能引发版本冲突，可以直接卸载。

二选一即可，不需要额外做eject操作：

方案1：在package.json内直接配置Jest（无额外依赖，成本最低） #

react-scripts会自动读取package.json中的jest字段，将其和内置配置合并，直接把你的Jest配置写到该字段下即可：

{
  // 保留原有package.json的其他配置不变
  "jest": {
    "collectCoverageFrom": [
      "./src/modules/**/*.tsx",
      "./src/hooks/**/*.tsx",
      "./src/components/**/*.tsx"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 100,
        "branches": 100,
        "functions": 100,
        "lines": 100
      }
    }
  }
}

注：原配置里的./src/modules/*.tsx只会匹配modules目录下第一层的tsx文件，如果要覆盖所有子目录的文件，需要改成**/*.tsx的通配格式。

方案2：保留独立配置文件，通过CRA配置覆写工具加载 #

如果不想把Jest配置写在package.json里，可以用配置覆写工具让CRA加载你写的独立jest配置文件，以@craco/craco为例：

1. 安装开发依赖
   npm install @craco/craco --save-dev
2. 根目录创建craco.config.js，引入已有的jest配置：

// 如果你的jest配置是.js格式，直接修改引入路径即可
const jestConfig = require('./jest.config.ts');

module.exports = {
  jest: {
    configure: jestConfig
  }
}

3. 修改package.json中的scripts命令，将react-scripts替换为craco对应的命令：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test --coverage"
  }
}

• 执行npm run test --watch进入watch交互调试模式时，Jest不会触发覆盖率阈值校验，只有单次执行npm t（不带--watch参数）时，覆盖率不满足阈值才会在终端抛出错误、中断流程。
• 配置生效后可以先把阈值调低（比如设为50%）验证规则是否加载，确认生效后再改回100%的要求。

内容的提问来源于stack exchange，提问作者Randall