Karma自定义适配器如何实现测试总数的动态更新？

我之前开发Karma自定义适配器时也碰到过一模一样的问题——没法提前拿到测试总数，用info方法动态更新完全没效果，毕竟它设计之初就是用来上报初始总数量的。不过有几个可行的方案能实现你想要的「已执行X/X」显示效果，分享给你：

方案一：自定义Reporter覆盖进度显示逻辑 #

Karma默认的进度报告器是依赖初始info里的total值渲染的，所以最直接的办法是自己写一个Reporter，完全掌控进度的计算和显示逻辑。

你可以监听Karma的suiteComplete和testComplete事件，维护两个计数器：一个记录已执行的测试数，另一个随着套件执行逐步累加预估的总测试数（或者直接在所有测试执行完后把总数同步为已执行数），然后实时更新控制台输出，覆盖之前的进度行。

这里给个极简的实现示例：

// 自定义Reporter的注册文件
module.exports = {
  'reporter:dynamic-progress': ['type', DynamicProgressReporter]
};

function DynamicProgressReporter(baseReporterDecorator, config) {
  baseReporterDecorator(this);

  let executed = 0;
  let total = 0;

  // 监听套件完成事件，累加总测试数
  this.on('suiteComplete', (suite) => {
    total += suite.tests.length;
  });

  // 监听单个测试完成事件，更新已执行数并刷新显示
  this.on('testComplete', () => {
    executed++;
    // 清除当前行并重新写入进度
    process.stdout.clearLine();
    process.stdout.cursorTo(0);
    process.stdout.write(`已执行 ${executed}/${total || executed}`);
  });

  // 测试全部完成后换行并提示
  this.on('runComplete', () => {
    process.stdout.write('\n✅ 测试执行完成\n');
  });
}

DynamicProgressReporter.$inject = ['baseReporterDecorator', 'config'];

然后在Karma配置里启用这个Reporter：

module.exports = function(config) {
  config.set({
    reporters: ['dynamic-progress'],
    // 其他配置...
  });
};

这个方案的好处是完全不受Karma原生info方法的限制，你想怎么显示就怎么显示，甚至可以加一些自定义样式（比如颜色）。

方案二：在适配器中动态遍历测试套件，提前计算总数 #

如果你的测试用例是可以通过遍历套件层级提前发现的（比如在执行每个套件前就能拿到它下面的所有测试），那可以在适配器里做一个递归遍历，每次发现新的套件就更新总数，然后调用info方法上报最新的total值。

示例代码大概是这样：

// 在你的自定义适配器中
function updateTestTotal(suite) {
  let calculatedTotal = 0;
  // 递归遍历所有子套件和测试用例
  const traverse = (currentSuite) => {
    calculatedTotal += currentSuite.tests.length;
    currentSuite.suites.forEach(traverse);
  };
  traverse(suite);
  // 调用info更新总数
  this.info({ total: calculatedTotal });
}

// 当你开始执行一个新套件时调用这个方法
this.onSuiteStart = (suite) => {
  updateTestTotal.call(this, suite);
  // 其他套件启动逻辑...
};

不过这个方案的局限性是，如果你测试用例是动态生成的（比如运行时才知道有多少个），那可能没法提前遍历到所有测试，这时候还是方案一更靠谱。

方案三：利用自定义事件传递总数更新 #

如果不想完全重写Reporter，也可以在适配器里触发自定义事件，然后修改现有Reporter（比如默认的progress reporter）来监听这个事件，更新内部的total值。

比如在适配器里：

// 当发现新的测试用例时
this.emit('custom:updateTotal', newTotal);

然后修改默认的progress reporter（或者继承它），监听这个事件并更新total：

function ModifiedProgressReporter(baseReporterDecorator, config) {
  baseReporterDecorator(this);
  
  this.on('custom:updateTotal', (newTotal) => {
    this.total = newTotal;
  });
}

不过这个方案需要修改或继承现有Reporter，相对麻烦一点，不如方案一灵活。

总之，最推荐的是方案一，自定义Reporter能完全满足你的需求，而且实现起来也不复杂，还能自定义显示效果。

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