Angular 18单元测试本地正常但Azure流水线执行失败求助

问题概述 #

本地运行正常的Angular 18单元测试（4个通过，其余跳过），在Azure流水线执行ng test --watch=false --browsers=ChromeHeadlessCI时失败，核心报错为Error: Found 1 load error，伴随Karma加载kjhtml reporter失败的日志。

解决方案 #

1. 移除CI环境不需要的kjhtml Reporter #

kjhtml是浏览器端的交互式测试报告工具，无界面的CI环境下无需启用，且可能引发加载错误。修改karma.conf.js的reporters配置：

// 原配置
reporters: ['progress', 'kjhtml'],
// 修改后
reporters: ['progress', 'junit'], // 用junit适配CI环境的报告输出

可选添加junit报告的输出配置：

junitReporter: {
  outputDir: require('path').join(__dirname, '../../test-results'),
  outputFile: 'unit-tests-results.xml',
  useBrowserName: false
}

2. 完善ChromeHeadlessCI启动参数 #

适配CI环境的资源限制与权限，补充ChromeHeadless启动参数：

customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: [
      '--no-sandbox',
      '--disable-gpu',
      '--disable-web-security',
      '--disable-dev-shm-usage', // 解决CI环境/dev/shm空间不足问题
      '--remote-debugging-port=9222',
      '--headless=new' // 新版ChromeHeadless标准参数，适配Angular 18
    ]
  }
},

3. 升级Karma及插件版本 #

Angular 18对Karma版本要求较高，当前使用的Karma v6.4.4版本过旧，执行以下命令升级依赖：

npm install karma@latest karma-chrome-launcher@latest karma-jasmine@latest karma-jasmine-html-reporter@latest karma-coverage@latest karma-junit-reporter@latest --save-dev

4. 调整Karma服务器监听配置 #

避免CI环境下的端口绑定问题，让Karma监听所有网卡：

config.set({
  // ...其他配置
  hostname: '0.0.0.0',
  port: 9876,
  // ...其他配置
});

5. 确保流水线依赖安装一致性 #

在Azure流水线测试任务前，使用npm ci代替npm install，保证依赖版本与本地完全一致：

- task: Npm@1
  displayName: Install Dependencies
  inputs:
    command: 'ci'
    workingDir: ''
    verbose: false

验证 #

修改完成后重新触发Azure流水线，测试应能正常执行。

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