在 jest-html-reporter/Istanbul 中启用 Jest 测试的代码覆盖率答案

【问题标题】：Enable code coverage for Jest tests in jest-html-reporter/Istanbul在 jest-html-reporter/Istanbul 中启用 Jest 测试的代码覆盖率
【发布时间】：2019-09-09 20:00:17
【问题描述】：

我正在使用 jest-html-reporter 为我的测试生成 HTML 报告。该报告显示了哪些测试失败了，哪些通过了，但没有显示有关代码覆盖率的任何信息。我想要统计数据，如覆盖的行、覆盖的语句等。我该如何实现？

我正在做的项目是基于create-react-app，我的package.json中有如下配置：

  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/assets/**/*.js",
      "!src/routes/index.js",
      "!src/index.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 69,
        "functions": 70,
        "lines": 70,
        "statements": 70
      }
    }
  }

"scripts": {
    "test-coverage": "react-scripts test --env=jsdom --no-cache --verbose --coverage --reporters=default --reporters=jest-html-reporter",
}

我也可以使用另一个报告器，例如istanbul，但我无法将其配置为生成所需的 html 测试报告。

【问题讨论】：

配置似乎是正确的，但我觉得 istanbul 可以用于测试覆盖率。

标签： javascript reactjs unit-testing jestjs istanbul

【解决方案1】：

Istanbul 只需配置 package.json 文件即可生成测试的 HTML 报告，因为它自动与 Jest 集成

在 Package.json 的 Script 部分只需添加这两行：

"scripts": {
    "test": "jest",
    "test-coverage": "jest --coverage",
  }

保存项目并在终端中运行以下命令：

Yarn test : 在终端生成覆盖率或 Yarn test-coverage 生成报告。

运行 Yarn test-coverage 时，“COVERAGE”文件夹在项目目录中创建，HTML 报告位于 Coverage > Icov-report >index.html

【讨论】：