使用Istanbul统计Playwright测试覆盖率时非测试文件覆盖率为0

核心原因 #

当前nyc未对业务代码进行插桩（instrument），导致测试执行时无法收集到业务文件的覆盖数据，仅能捕获测试脚本自身的执行情况。

解决方案步骤 #

1. 明确指定需要统计的业务文件路径 #

你的.nycrc中include字段为空，nyc不知道要监控哪些业务代码，需要补充业务文件的路径规则：

{
  "extends": "@istanbuljs/nyc-config-typescript",
  "all": true,
  "check-coverage": true,
  "include": [
    "src/**/*.ts", // 替换成你的业务代码根目录，比如src下所有ts文件
    "lib/**/*.ts"  // 如果有编译后的代码目录也可按需添加
  ],
  "exclude": [
    "playwright.config.ts",
    "**/*.hot-update.js",
    "**/adminFixture.ts",
    "**/baseFixtures.ts",
    "**/userFixture.ts",
    "**/apiFixture.ts"
  ],
  "reporter": ["text", "json-summary", "html"]
}

• 注意：include的路径要和你实际项目中业务代码的位置匹配，比如如果业务代码在src/components/、src/utils/下，用src/**/*.ts就能覆盖所有子目录的ts文件。

2. 确保Babel插桩插件正确配置 #

既然使用了babel-plugin-istanbul，需要在Babel配置文件（.babelrc或babel.config.js）中启用该插件，且仅在测试环境生效：

// babel.config.js
module.exports = {
  presets: [/* 你的现有preset，比如@babel/preset-typescript */],
  env: {
    test: {
      plugins: ["istanbul"]
    }
  }
};

• 这样配置可以避免插桩代码被打包到生产环境，仅在测试时生效。

3. 调整NYC执行命令，确保代码被插桩 #

直接运行npx nyc playwright test可能无法正确插桩浏览器端的业务代码，需要添加--instrument参数强制nyc对代码进行插桩：

npx nyc --instrument playwright test HistoryTMZDownload.spec.ts

如果你的业务代码是通过Webpack/Vite等构建工具打包的，还需要确保构建过程中启用了Istanbul插桩（比如在测试环境的构建配置中加入babel-plugin-istanbul）。

4. 验证TypeScript配置支持覆盖率映射 #

因为使用了@istanbuljs/nyc-config-typescript，需要确保你的tsconfig.json中开启了sourceMap：

{
  "compilerOptions": {
    "sourceMap": true, // 必须开启，否则nyc无法将编译后的代码映射回源码
    // 其他配置...
  }
}

5. 检查是否误排除了业务文件 #

确认.nycrc的exclude规则没有覆盖到业务代码，比如不要出现src/**/*.ts这类排除规则，避免把需要统计的文件排除在外。

验证方法 #

运行测试后，查看生成的coverage目录下的html报告，检查业务文件是否出现在报告中。如果还是没有，可临时在业务文件中加一行console.log(__cov__)，运行测试后查看控制台是否输出覆盖率对象，以此判断代码是否被正确插桩。

内容的提问来源于stack exchange，提问作者dogowar