React使用Jest执行npm test测试通过但代码覆盖率无数据如何解决

解决方法 #

• 第一步：确认测试命令携带覆盖率参数
  打开项目根目录的package.json文件，检查scripts下的test配置，需要加上--coverage参数，示例配置如下：

{
  "scripts": {
    "test": "react-scripts test --coverage"
  }
}

如果只是临时运行查看覆盖率，也可以直接执行npm test -- --coverage命令。

• 第二步：配置Jest覆盖率统计范围
  如果添加参数后仍无覆盖率数据，说明Jest没有识别到需要统计的组件文件，你可以在package.json中新增Jest配置，或是在根目录新建jest.config.js配置文件，明确指定统计范围：
  以下是package.json的配置示例：

{
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/**/*.test.{js,jsx}",
      "!src/index.js",
      "!src/reportWebVitals.js"
    ]
  }
}

配置规则说明：src/**/*.{js,jsx}代表统计src目录下所有js、jsx文件的覆盖率，感叹号开头的规则代表排除不需要统计的文件（比如测试文件本身、项目入口文件等）。

• 第三步：清理缓存后重新运行
  Jest的本地缓存可能导致覆盖率统计异常，你可以执行npm test -- --coverage --clearCache清理缓存后再次运行，查看是否正常生成覆盖率数据。

• 自定义脚手架项目额外检查
  如果你没有使用create-react-app，是自行搭建的项目脚手架，需要确保已经安装babel-jest、@babel/preset-react依赖，并且babel配置中正确配置了React相关预设，否则Jest无法正确插桩统计覆盖率。

另外你的测试代码存在两处可以优化的点：一是组件名是HeaderCreate，但测试代码中闭合标签写的是</CreateHeader>，如果不是粘贴错误请及时修正；二是第三个测试用例里closeRightSection传了空字符串，组件中是作为函数调用的，建议替换为jest.fn()生成的模拟函数，避免后续测试点击逻辑时报错。

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