升级Angular 14后ng test --code-coverage报重连超时及TypeError错误

问题背景 #

升级至Angular 14后，执行ng test --code-coverage时所有90个测试用例执行成功，但最终抛出两类错误：

• Chrome Headless 117.0.5938.132提示：Disconnected reconnect failed before timeout of 2000ms (server shutting down)
• karma-sonarqube-unit-reporter报TypeError：无法读取null的'manual-123'属性

当前环境：node 14.17.3、npm 6.14.13；Karma依赖：karma ~6.3.17、karma-chrome-launcher ~3.1.1、karma-coverage ~2.0.3、karma-jasmine ~4.0.2、karma-jasmine-html-reporter ~1.7.0、karma-sonarqube-unit-reporter ~0.0.23

已尝试：配置autoWatch: true、ChromeHeadlessNoSandbox及启动Flags，升级Karma包、添加超时配置（captureTimeout:210000）均未解决。

针对性解决方案 #

1. 修复Chrome Headless断开连接问题 #

调整Karma完整超时配置

除了captureTimeout，补充以下超时参数到karma.conf.js，覆盖默认短超时限制：

module.exports = function(config) {
  config.set({
    // ... 其他已有配置
    browserDisconnectTimeout: 30000,    // 浏览器断开后等待重连的超时时间
    browserDisconnectTolerance: 3,      // 允许断开重连的最大次数
    browserNoActivityTimeout: 60000,    // 浏览器无活动状态的超时阈值
    captureTimeout: 210000,             // 捕获浏览器实例的超时时间
  });
};

更新Chrome Launcher并优化启动参数

旧版karma-chrome-launcher与新版Chrome Headless兼容性较差，先升级依赖：

npm install karma-chrome-launcher@~3.2.0 --save-dev

然后修改浏览器启动Flags，补充解决环境资源限制的参数：

customLaunchers: {
  ChromeHeadlessNoSandbox: {
    base: 'ChromeHeadless',
    flags: [
      '--headless',
      '--disable-gpu',
      '--no-sandbox',
      '--disable-dev-shm-usage',  // 解决容器/低内存环境下的共享内存不足问题
      '--remote-debugging-port=9222',  // 固定调试端口，避免端口冲突
    ]
  }
},
browsers: ['ChromeHeadlessNoSandbox']

2. 修复karma-sonarqube-unit-reporter的TypeError问题 #

该reporter版本~0.0.23已多年未维护，与Angular 14及新版Karma存在兼容性问题，优先替换为活跃维护的替代方案：

替换为karma-sonarqube-reporter

卸载旧reporter，安装新版：

npm uninstall karma-sonarqube-unit-reporter --save-dev
npm install karma-sonarqube-reporter --save-dev

在karma.conf.js中配置新reporter：

reporters: ['progress', 'kjhtml', 'coverage', 'sonarqube'],
sonarqubeReporter: {
  basePath: 'src/app',               // 项目源码根路径
  filePattern: '**/*spec.ts',        // 测试文件匹配规则
  encoding: 'utf-8',
  outputFolder: 'reports',           // 报告输出目录（需确保目录存在）
  legacyMode: false,
  reportName: () => 'sonar-unit-report.xml'
}

若坚持使用旧reporter的排查点

检查karma.conf.js中sonarqubeUnitReporter的配置：

• 确认properties字段中是否手动配置了manual-123，若有则检查对应值是否为null
• 确保outputFile指定的目录已创建，避免因文件写入失败导致reporter内部状态异常

3. 环境依赖兼容性优化 #

• 升级npm版本：Angular 14与npm 8.x兼容性更好，执行：

  npm install -g npm@8.19.4
  

• 清理并重装依赖：消除依赖版本冲突：

  rm -rf node_modules package-lock.json
  npm install
  

• 升级Karma核心包：Angular 14推荐Karma ~6.4.0版本，执行：

  npm install karma@~6.4.0 --save-dev
  

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