使用Jest测试ReactJS应用时HTML覆盖率报告数值缺失问题

遇到这种CLI文本报告正常但HTML报告没数值的情况，大概率是覆盖率收集的范围配置或者路径映射的问题，下面是几个常见的排查方向和解决办法：

1. 未指定覆盖率收集的源文件范围 #

你的jest.config.json里只开启了collectCoverage: true，但没明确告诉Jest要对哪些业务代码文件收集覆盖率。默认情况下Jest可能只会统计测试文件本身的覆盖率，而非你的React业务代码，这就会导致HTML报告找不到对应源文件的数值。

解决办法：添加collectCoverageFrom配置，指定你的业务代码路径，比如代码都在src目录下，就补充如下配置：

{
  "roots": ["test"],
  "collectCoverage": true,
  "collectCoverageFrom": ["src/**/*.{js,jsx,ts,tsx}"], // 根据你的实际文件后缀调整
  "coverageReporters": ["text","html"],
  "coverageDirectory": "<rootDir>/coverage/"
}

2. 旧覆盖率缓存文件干扰 #

之前生成的旧覆盖率文件可能残留缓存，导致新的HTML报告生成异常。

解决办法：手动删除coverage文件夹后，重新运行测试生成报告：

rm -rf coverage && npm test

（用yarn的话替换为yarn test）

3. Jest版本兼容性bug #

部分旧版本的Jest（比如26.x系列的部分版本）存在HTML覆盖率报告数值不显示的已知bug。

解决办法：升级Jest到最新稳定版本：

npm install jest@latest --save-dev

4. 路径忽略配置误排除源文件 #

检查你的jest.config.json是否有coveragePathIgnorePatterns配置，或者项目根目录的.gitignore、.jestignore文件，有没有不小心把业务代码目录（比如src）加入了忽略列表，导致Jest跳过了这些文件的覆盖率收集。

如果有这类配置，确保你的业务代码路径没有被错误排除。

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