前端开发中 JavaScript 异步事件循环怎么编写测试-js教程-PHP中文网

javascript异步测试需验证异步行为而非实现事件循环，应使用jest.usefaketimers()模拟时间、显式等待微任务（如await promise.resolve()）、合理触发宏任务（如jest.advancetimersbytime()），并注意微宏任务执行顺序。

前端开发中 javascript 异步事件循环怎么编写测试

JavaScript 异步事件循环本身是运行时机制，不能“编写”它，但可以编写测试来验证异步代码在事件循环中的行为是否符合预期——比如 setTimeout、Promise.then、async/await、微任务与宏任务的执行顺序等。

理解测试目标：验证异步行为，而非实现事件循环

你无法也不应测试 V8 或浏览器引擎内部的事件循环实现。真正要测的是：你的异步逻辑（如状态更新、回调触发、错误捕获）是否按预期时机和顺序发生。关键在于控制时间、隔离环境、断言副作用。

避免依赖真实定时器（setTimeout/setInterval），否则测试慢且不稳定
用 Jest 等测试框架提供的 jest.useFakeTimers() 模拟时间推进
对 Promise 链或 async 函数，需确保等待微任务清空（例如 await Promise.resolve() 或 await flushPromises()）

用 Jest 模拟宏任务（如 setTimeout）

Jest 支持 legacy 和 modern 两种 fake timers 模式。推荐 modern 模式（基于 fake-timers 库），能更准确模拟 Node.js 和浏览器行为。

Gradle 9.8.0

下载

启用：jest.useFakeTimers({ legacyFakeTimers: false });
触发一个宏任务：jest.advanceTimersByTime(1000);
立即执行所有已到期定时器：jest.runOnlyPendingTimers();
清理：jest.useRealTimers();（尤其在 afterEach 中）

显式等待微任务（Promise、queueMicrotask）

微任务不会被 jest.advanceTimersByTime() 触发，必须手动“清空”微任务队列才能继续断言。

简单方式：await Promise.resolve();（触发一次微任务轮转）
更稳妥方式（尤其含多个嵌套 Promise）：await new Promise(process.nextTick);（Node）或封装 flushPromises()
示例：

test('fetchData resolves before timeout', async () => {
  jest.useFakeTimers();
  const mockFetch = jest.fn().mockResolvedValue({ ok: true });
  global.fetch = mockFetch;

  const result = fetchData(); // 返回 Promise
  jest.advanceTimersByTime(50); // 此时 fetch 已发起，但响应未返回
  await Promise.resolve(); // 等待 fetch 的 Promise resolve（微任务）
  
  expect(mockFetch).toHaveBeenCalledTimes(1);
  expect(await result).toEqual({ ok: true });
});