如何实现Angular中Karma慢测试用例的并发执行？

我正在测试一款日期时间UI组件，该组件支持通过方向键或点击上下箭头图标滚动单个数字；按住按键或长按箭头时会触发自动重复效果，直到释放操作。
测试中每次模拟自动重复运行2秒，这会占用真实的2秒时间。在添加更多同类测试前，我希望将这类测试从串行执行改为并发执行。
我已按照网上的教程配置，但测试总耗时未变，仍为串行执行。以下是我的配置文件及测试代码：

配置文件 #

karma.conf.js #

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-parallel'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    parallelOptions: {
      executors: (require('os').cpus().length),
      shardStrategy: 'round-robin'
    },
    client: {
      jasmine: {},
    },
    jasmineHtmlReporter: {
      suppressAll: true
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/temp'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    browsers: ['Chrome'],
    restartOnFileChange: true
  });
};

angular.json 相关配置 #

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "tsConfig": "projects/tubular-ng-widgets/tsconfig.spec.json",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "karmaConfig": "karma.conf.js"
          }
        }

测试用例代码 #

it('should do upward auto-repeated digit rolling', async () => {
    await clickDigit(digits.length - 1); // Roll one second forward repeatedly
    await sendKey('ArrowUp', 2000);
    expect(timeEditor.value - (sampleTimeMs + 17000)).toBeLessThan(3000);
  });

  it('should do downward auto-repeated digit rolling', async () => {
    await clickDigit(digits.length - 2); // Roll ten seconds backward repeatedly
    await sendKey('ArrowDown', 2000);
    expect(timeEditor.value - (sampleTimeMs - 170000)).toBeLessThan(30000);
  });

  it('should do upward auto-repeated digit rolling via up-arrow icon', async () => {
    await clickDigit(digits.length - 1); // Roll one second forward repeatedly
    await sendTestClick(upArrow, fixture, 2000);
    expect(timeEditor.value - (sampleTimeMs + 17000)).toBeLessThan(3000);
  });

提问 #

请问我明显遗漏了什么配置吗？

1. 启用karma-parallel框架
   你已经在plugins中引入了karma-parallel，但未将其添加到frameworks数组中，导致Karma不会加载并行测试功能。修改karma.conf.js的frameworks配置：

frameworks: ['jasmine', '@angular-devkit/build-angular', 'parallel'],

2. 配置无头浏览器（推荐）
   并行测试多实例时，无头模式能减少系统资源占用，避免多个Chrome窗口卡顿。调整karma.conf.js的浏览器配置：

customLaunchers: {
  ChromeHeadless: {
    base: 'Chrome',
    flags: ['--headless', '--disable-gpu', '--no-sandbox']
  }
},
browsers: ['ChromeHeadless'],

3. 确保测试用例无共享状态
   如果测试用例之间共享组件实例、全局变量等状态，并行执行会导致测试失败。需保证每个it块都有独立的初始化逻辑，比如在beforeEach中重新创建组件fixture。

4. 检查版本兼容性
   确认karma-parallel与当前Angular、Karma版本匹配，版本不兼容也可能导致并行功能失效。可通过npm ls karma-parallel查看版本，必要时升级或降级适配。

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