JavaScript 中怎么用 Jest 查看代码覆盖率报告-js教程-PHP中文网

jest 通过 --coverage 参数启用内置覆盖率统计，自动生成终端汇总和 coverage/lcov-report/index.html 可视化报告，支持 collectcoveragefrom 和 coveragethreshold 等配置精细化控制。

javascript 中怎么用 jest 查看代码覆盖率报告

在 JavaScript 项目中用 Jest 查看代码覆盖率报告，核心是启用内置的覆盖率收集功能并生成可读的 HTML 或终端报告。不需要额外插件，Jest 自带完整支持。

配置 Jest 启用覆盖率

最简单的方式是在运行 Jest 时加 --coverage 参数：

npm test -- --coverage（如果 test 脚本是 jest）
npx jest --coverage（直接运行）

这会自动收集覆盖率数据，并在终端输出简明汇总（如语句、分支、函数、行覆盖百分比）。

生成 HTML 可视化报告

默认只输出终端文本，要查看带高亮、文件列表和详情的 HTML 报告，需确保 Jest 配置中启用了 HTML 报告器：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

Jest 会自动启用 html 报告器（v29+ 默认包含），无需额外配置
运行 npx jest --coverage 后，Jest 会在项目根目录下生成 coverage/ 文件夹
打开 coverage/lcov-report/index.html 即可浏览交互式报告

点击具体文件，能看到每行是否被执行（绿色=覆盖，红色=未覆盖，黄色=部分分支未覆盖）。

自定义覆盖率阈值与范围

可通过 jest.config.js 精细控制：

collectCoverageFrom：指定哪些文件参与统计（推荐排除测试文件和第三方代码）
coverageThreshold：设置最低覆盖率要求，低于则测试失败（适合 CI）
coverageDirectory：修改报告输出路径

示例片段：

module.exports = {
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.test.{js,jsx,ts,tsx}',
    '!src/setupTests.js'
  ],
  coverageThreshold: {
    global: { statements: 80, branches: 75, functions: 85, lines: 80 }
  }
};

常见问题处理

没生成 coverage 文件夹？ 检查是否误加了 --watch 或 --no-cache 干扰了覆盖率收集；确保测试实际运行成功
覆盖率 100% 但报告里有红行？ 可能是异步逻辑未 await、条件分支未走全，或存在不可达代码（如 throw new Error() 后的语句）
想只测某个文件的覆盖率？ 用 npx jest src/utils/math.js --coverage，配合 collectCoverageFrom 更精准

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南