Jest如何获取特定React组件文件夹的代码覆盖率及未测试组件统计？

所有需求均可基于Jest原生的覆盖率能力实现，无需引入额外第三方工具。

前置配置 #

为了让覆盖率统计完全聚焦到目标组件目录，需要先在Jest配置项中补充两个关键设置：

• 配置 collectCoverageFrom 字段，将统计范围限定为src/components/**/*.{js,jsx,ts,tsx}，避免统计混入其他目录的业务代码
• 配置 coverageReporters 字段，保留html和json-summary两种格式的报告，兼顾人工查看和脚本解析的需求

配置完成后，可使用单次运行的测试命令生成稳定的覆盖率数据，减少watch模式的冗余输出：
jest --coverage
命令执行后生成的报告会默认存放在项目根目录的coverage文件夹下。

获取完全未被测试覆盖的组件列表 #

有两种可落地的获取方式：

• 方式一：直接筛选HTML可视化报告
  打开coverage目录下的index.html文件，列表内所有覆盖率为0的组件会以红色高亮标注，无需额外处理即可快速定位无任何测试覆盖的组件。
• 方式二：脚本解析JSON报告
  在coverageReporters中额外添加json格式的报告生成配置，运行测试后会在coverage目录下生成coverage-final.json文件，文件内逐文件记录了每个组件的语句、分支、函数、行级覆盖率数据。编写简单的Node脚本遍历该文件，筛选出所有位于src/components路径下、四项覆盖率指标全为0的文件路径，即可输出完整的未覆盖组件列表。

未覆盖情况的百分比统计 #

两类核心统计维度的结果都可直接获取：

• 组件粒度未覆盖率：按照完全无覆盖的组件数量 / src/components 下的总组件数量 * 100%计算即可，其中“完全无覆盖的组件”指上述四项覆盖率指标全为0的组件，区别于单行业务代码未覆盖的情况。
• 代码粒度未覆盖率：直接读取JSON报告里coverage-summary.json中对应src/components范围的汇总指标即可，比如该范围的行覆盖率为40%，对应的行级代码未覆盖率就是60%，这类细粒度统计是Jest默认就会计算输出的内容。

常见注意事项 #

• 配置collectCoverageFrom后，可先运行一次测试核对报告里的文件总数和目标目录下的实际组件数是否匹配，避免因为配置漏写导致部分组件没有被纳入统计范围
• 可将JSON报告的解析逻辑写成简单的执行脚本，集成到本地开发流程或CI流水线中，实现每次跑测试时自动输出未覆盖组件列表和对应的未覆盖百分比，无需人工翻查报告

内容的提问来源于stack exchange，提问作者Wai Yan Hein