如何在QUnit中合并模块钩子，复用初始化与清理逻辑？

官方特性说明 #

QUnit目前没有提供直接合并多个模块钩子对象的内置API，不管是同步还是异步类型的钩子，都需要开发者自行处理组合逻辑。

自定义工具的合理性 #

你自行实现的concatenateHooks工具是完全合理的解决方案，社区中也普遍采用这类自定义工具来复用钩子逻辑。实现这类工具时，需要重点关注几个核心点：

• 异步钩子的顺序执行：如果多个钩子是异步的（比如使用async/await或done回调），要确保它们按顺序执行，前一个钩子完成后再启动下一个，避免出现异步竞态问题。
• 全钩子类型覆盖：要覆盖before、beforeEach、after、afterEach所有钩子类型，每个类型下的多个钩子都要串联执行。
• 错误捕获与传递：如果某个钩子抛出错误或异步执行失败，要确保后续钩子终止执行，同时让QUnit能正确捕获并上报错误。

以下是一个参考实现示例：

function concatenateHooks(...hookObjects) {
  const combined = {
    before: [],
    beforeEach: [],
    afterEach: [],
    after: []
  };

  // 收集所有传入的钩子
  hookObjects.forEach(hooks => {
    Object.keys(combined).forEach(hookType => {
      if (hooks[hookType]) {
        combined[hookType].push(hooks[hookType]);
      }
    });
  });

  // 将同类型钩子转换为串联执行的函数
  Object.keys(combined).forEach(hookType => {
    const hooks = combined[hookType];
    if (hooks.length === 0) {
      delete combined[hookType];
      return;
    }
    combined[hookType] = async function(...args) {
      for (const hook of hooks) {
        // 兼容回调式和async/await式异步钩子
        if (hook.length > 0) {
          await new Promise(resolve => hook.call(this, ...args, resolve));
        } else {
          await hook.call(this, ...args);
        }
      }
    };
  });

  return combined;
}

// 使用示例
const fruitHook = {
  beforeEach: async () => { /* 水果模块初始化逻辑 */ }
};
const nutHook = {
  beforeEach: (done) => { /* 坚果模块异步初始化逻辑，调用done完成 */ }
};

QUnit.module('TestFruitsAndNuts', concatenateHooks(fruitHook, nutHook), () => {
  // 测试用例编写
});

替代实现思路 #

除了合并钩子对象，也可以用高阶函数封装通用逻辑，在模块钩子中直接调用：

const initFruits = async () => { /* 水果初始化逻辑 */ };
const initNuts = (done) => { /* 坚果异步初始化逻辑 */ };

QUnit.module('TestFruitsAndNuts', {
  beforeEach: async function() {
    await initFruits();
    await new Promise(resolve => initNuts(resolve));
  }
}, () => {
  // 测试用例编写
});

这种方式适合钩子逻辑较少的场景，而合并工具更适合需要频繁组合多组钩子对象的场景。

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