Jest v29+自动生成带模块树的HTML覆盖率报告，支持路径分组、层级展开与TS源码显示；可通过collectCoverageFrom限定范围、lcov后处理聚合模块、Coverage Gutters插件实现VSCode内嵌高亮。
在测试报告中直观展示各模块的代码覆盖率，核心是生成结构清晰、可交互的 HTML 报告，并确保模块路径可识别、层级可展开。Jest 和 Istanbul（nyc）都支持开箱即用的模块级视图，无需额外插件。
自动生成带模块树的 HTML 报告
Jest v29+ 默认启用 html 报告器，运行 npx jest --coverage 后，会在项目根目录生成 coverage/lcov-report/index.html。打开该文件：
- 首页以表格形式列出所有被测文件，按路径分组（如
src/utils/、src/components/），每行显示该模块的语句、分支、函数、行覆盖率 - 点击任意文件名，进入详细页面：左侧显示完整源码，每行前有颜色标记（绿色=覆盖，红色=未覆盖，黄色=分支部分未覆盖）
- 路径层级自动折叠，例如
src/下的子目录可逐级点开，适合 Monorepo 或多模块项目快速定位
让模块名称更清晰可读
默认路径可能含冗长绝对路径或构建产物路径，影响可读性。可通过 jest.config.js 中的 coverageDirectory 和 collectCoverageFrom 控制：
- 用
collectCoverageFrom显式限定源码范围，避免混入dist或lib目录 - 配合
coverageReporters: ['html', 'text-summary']，终端输出会按目录聚合，如：src/utils/............ 92%<br>src/api/............... 76%<br>src/components/....... 85%
- 若使用 TypeScript，确保
sourceMaps: true开启，HTML 报告中显示的是原始.ts路径而非编译后.js
按功能模块聚合统计（非单文件）
想把多个文件归为一个逻辑模块（如 “认证模块”、“支付模块”），可借助 lcov 工具后处理：
立即学习“Java免费学习笔记（深入）”；
- 先让 Jest 输出
lcov格式：npx jest --coverage --coverage-reporters=lcov - 用
lcov命令过滤并合并路径：lcov --extract coverage/lcov.info 'src/auth/**' --output-file coverage/auth.lcov - 再用
genhtml auth.lcov单独生成该模块报告，或合并进总报告 - 也可在 CI 中为关键模块单独设阈值：
coverageThreshold: { 'src/auth/**': { statements: 95 } }
VSCode 内嵌高亮辅助浏览
配合插件，让覆盖率信息直接落在编辑器里：
- 安装 Coverage Gutters 插件，它会自动读取
coverage/lcov.info - 打开任意源码文件，左侧行号旁出现色块：绿色实心=已覆盖，红色空心=未覆盖，灰色=未计入统计（如测试文件）
- 状态栏显示当前文件覆盖率百分比，点击可跳转到对应 HTML 报告页
- 对跨模块调用场景（如
utils/format.js被components/Order.jsx调用），能一眼看出哪些模块的工具函数实际被测到了
