ReactJS应用自动化测试中Mocha Chai框架Timeout超时问题求解

• 优先排查异步回调漏调用问题

报错提示首先指向done()回调未调用，这是超时问题的高发原因：

1. 不要混用async/await和done回调，异步测试要么直接返回Promise，要么用async关键字，不需要额外传done
2. 所有异步分支都要覆盖到，包括catch错误分支，避免异常抛出后没有走完逻辑
   正确示例：

// 异步测试正确写法 用async/await无需done
it("Testcase1", async function() {
  this.timeout(60000);
  // 你的测试逻辑，比如渲染组件、等待接口返回
  await render(<MyComponent />);
  const res = await fetchApi();
  expect(res).to.be.equal(expected);
})

// 如果必须用done，要保证所有分支都调用
it("Testcase2", function(done) {
  fetchApi().then(res => {
    expect(res).to.be.equal(expected);
    done();
  }).catch(err => {
    done(err); // 错误分支也要调用done，传err会被Mocha捕获为用例失败
  })
})

• 统一配置超时规则，避免单条漏配

不需要在每个it用例里单独写this.timeout，可以全局或者按测试套件配置：

1. 运行时加参数：mocha --timeout 60000
2. 配置文件中配置：在mocha.config.js里添加timeout: 60000
3. 套件级配置，给整个describe块的所有用例统一设置：

describe("Test Suite1", function () {
  this.timeout(60000); // 整个套件所有用例都用60s超时
  it("Testcase1", async function() {
    // 测试逻辑
  })
  it("Testcase2", async function() {
    // 特殊慢的用例可以单独覆盖超时配置
    this.timeout(120000);
  })
})

• 清理用例上下文避免资源泄漏

单条用例运行正常、全量运行超时，大多是前面的用例没有清理残留资源导致后续用例阻塞：
每个用例运行结束后用afterEach执行清理逻辑：

import { cleanup } from '@testing-library/react';

afterEach(() => {
  // @testing-library 自带cleanup，自动卸载所有渲染的组件
  cleanup();
  // 清理所有未执行的定时器
  clearAllTimers();
  // 终止未完成的网络请求
  abortAllPendingFetch();
  // 重置所有mock函数的调用记录，用Sinon则调用sinon.restore()
  vi.resetAllMocks();
})

• 拆分慢用例并添加精准超时提示

把单条执行时长超过10s的用例拆分为多个粒度更小的用例，降低单条超时概率。同时可以给异步逻辑添加主动超时判断，快速定位卡慢位置：

// 给异步操作加主动超时捕获
const withTimeout = (promise, timeoutMs, stepName) => {
  return Promise.race([
    promise,
    new Promise((_, reject) => {
      setTimeout(() => reject(new Error(`步骤[${stepName}]执行超时`)), timeoutMs)
    })
  ])
}

it("Testcase1", async function() {
  await withTimeout(render(<MyComponent />), 10000, "组件渲染");
  const res = await withTimeout(fetchList(), 10000, "列表接口请求");
  expect(res.length).to.be.gt(0);
})

• 排查运行环境资源瓶颈

如果本地运行全量用例正常，只有CI环境偶现超时，大概率是CI环境CPU/内存资源不足导致执行变慢，可以单独给CI环境调高超时配置，或者减少Mocha并行执行的进程数，避免资源抢占。

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