如何配置Jest使快照测试参与运行但不纳入代码覆盖率统计
实现方案说明
完全可以达到你要的效果——所有测试正常运行校验、快照测试的覆盖贡献不进入最终报告。
之前你用
--testMatch排除快照测试的思路存在局限:testMatch控制的是哪些测试会被Jest加载执行,一旦配置否定的匹配规则,快照测试会直接被跳过,既不会被运行校验,也不会出现在最终的测试通过数统计里。我们真正需要做的是把测试运行的范围规则和覆盖率统计的范围规则完全解耦,不用为了排除覆盖统计,把测试本身也排除掉。
核心实现逻辑
- 测试运行层面:保留全量匹配规则,确保
component.test.tsx和component_snapshot.test.tsx都能被正常执行、校验通过,最终通过测试总数为2个 - 覆盖率统计层面:通过Jest的专属配置,跳过快照测试执行过程中产生的覆盖数据,最终报告里
component.tsx的覆盖率仅保留行为测试贡献的50%
具体配置方法
方案一:零脚本配置(推荐)
适合能统一管理快照测试路径的项目:
把所有快照测试文件统一放到单独的目录下,比如项目里新建
src/snapshot-tests/文件夹,把component_snapshot.test.tsx移到这个路径下在项目
package.json的jest配置块里添加规则,让这个目录下的测试不参与覆盖率统计:{ "jest": { "coveragePathIgnorePatterns": [ "/node_modules/", "/src/snapshot-tests/" ] } }直接执行全量带覆盖率的测试命令即可:
react-scripts test --coverage执行效果:
- 两个测试文件都会被正常加载运行,全部通过后总计数为2个测试通过
- 覆盖率报告生成时,会自动跳过snapshot-tests目录下测试产生的覆盖数据,最终
component.tsx的覆盖率就是行为测试贡献的50%
方案二:自定义结果拦截(适合没法统一调整路径的项目)
如果不想改动现有测试文件的目录结构,可以通过自定义测试结果处理脚本,过滤快照测试的覆盖数据:
- 在项目根目录新建
jest-coverage-filter.js,写入过滤逻辑:module.exports = (testResult) => { // 遍历所有测试结果,清空快照测试对应的覆盖数据 testResult.testResults.forEach(item => { if (item.name.includes('snapshot')) { item.coverage = {}; } }) return testResult; } - 在
package.json的jest配置块里挂载这个脚本:{ "jest": { "testResultsProcessor": "<rootDir>/jest-coverage-filter.js" } } - 同样执行
react-scripts test --coverage即可,效果和零脚本方案完全一致
注意事项
- 以上配置不会影响日常不带
--coverage的测试流程,所有测试还是会正常运行 - 不需要在
testMatch里加任何排除规则,不然会导致快照测试被跳过,达不到「运行所有测试」的目标
内容的提问来源于stack exchange,提问作者kqcef
相关产品推荐
相关产品推荐

