如何在QUnit测试框架中统计代码覆盖率，解决Istanbul、Karma相关报错

报错原因排查 #

• nyc + QUnit 方案报错：直接执行nyc qunit是在Node.js环境运行测试，你的项目依赖浏览器端的RequireJS加载器，Node环境未全局注入requirejs变量，因此触发未定义报错。
• Karma方案报错：一是未在Karma配置中预加载RequireJS依赖，二是缺少ES模块转译配置，原生Karma默认不识别ES6 import语法，直接替换为require也需要对应CommonJS转译支持，config.js被意外加载是因为Karma文件匹配规则范围过宽，引入了非必要的全局配置文件。
• Puppeteer适配性确认：可以实现代码覆盖率统计，Puppeteer支持采集浏览器上下文的代码覆盖率数据，结合Istanbul的插桩能力可完美适配QUnit测试场景。

推荐落地方案（适配现有Puppeteer测试运行器） #

1. 代码插桩配置
   使用Babel的场景下安装babel-plugin-istanbul，在Babel配置中加入插桩规则：

{
  "plugins": [
    ["istanbul", {
      "include": ["src/js/**/*.js"],
      "exclude": ["src/js/tests/**/*.js"]
    }]
  ]
}

未使用Babel的场景，直接执行命令生成插桩后的源码：
nyc instrument src/js instrumented-src
测试运行时加载插桩后的源码即可。
2. Puppeteer测试逻辑改造
在现有Puppeteer运行QUnit测试的逻辑中新增两步：

• 测试执行前配置页面加载插桩后的JS资源
• 测试用例全部执行完成后，从页面全局变量提取覆盖率数据：
  const coverageData = await page.evaluate(() => window.__coverage__)
  将返回的覆盖率数据写入.nyc_output目录下的JSON文件。

3. 覆盖率报告生成
   执行nyc report --reporter=html --reporter=text即可生成可视化及终端输出的覆盖率报告，支持行、函数、分支覆盖率统计。

备选Karma适配方案 #

若需保留Karma测试流程，按以下步骤修改配置：

1. 安装依赖：karma-requirejs、karma-babel-preprocessor、karma-coverage-istanbul-reporter
2. 修改karma.conf.js配置：

• files字段先加载RequireJS依赖，再加载测试相关资源，配置排除规则过滤不需要的config.js文件
• preprocessors字段给所有业务JS文件配置babel转译及istanbul插桩
• reporters字段加入coverage-istanbul，配置输出路径即可生成覆盖率报告

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