升级到Angular 13后执行带--code-coverage参数的测试失败如何解决

• Angular 13 对测试工具链做了破坏性调整，移除了对karma-coverage、karma-coverage-istanbul-reporter的内置依赖，低版本Angular默认携带的相关插件，升级后需要手动维护
• 旧版karma-coverage-istanbul-reporter已被废弃，Angular 13+ 统一使用@angular-devkit/build-angular内置的istanbul能力，不再兼容独立的istanbul reporter配置项

1. 卸载废弃的旧依赖

# npm 环境
npm uninstall karma-coverage-istanbul-reporter
# yarn 环境
yarn remove karma-coverage-istanbul-reporter

2. 安装新版本所需的覆盖率插件

# npm 环境
npm install karma-coverage --save-dev
# yarn 环境
yarn add karma-coverage --dev

3. 调整karma.conf.js配置

• 在plugins数组中补充注册karma-coverage插件：

plugins: [
  require('karma-coverage'),
  // 保留原有其他插件配置
]

• 移除配置中所有coverageIstanbulReporter相关节点，reporters数组中保留coverage项即可

4. （可选）在angular.json中配置覆盖率输出规则
   找到对应项目下的test节点，补充如下配置可自定义输出格式和路径：

"test": {
  "options": {
    "codeCoverage": true,
    "coverageReporter": {
      "dir": "coverage/waxion",
      "reports": ["html", "lcovonly", "text-summary", "cobertura"]
    }
  }
}

5. 重新执行测试命令即可

ng test waxion --no-watch --code-coverage --browsers ChromeHeadless

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