JS宏任务执行顺序无法直接断言时间点，但可通过Jest fake timers模拟推进或waitFor等待可观测状态来间接验证逻辑是否按预期在宏任务阶段执行。
JS 项目中宏任务（如 setTimeout、setInterval、postMessage、I/O 回调等）的执行顺序本身**无法在单元测试中直接“断言时间点”或“精确控制真实时序”**，但可以通过模拟、等待和状态观测来**间接验证逻辑是否按预期在宏任务阶段被调用**。关键不是测浏览器调度器，而是测你的代码是否正确把逻辑放进了宏任务队列、且触发时机符合设计意图。
用 Jest 的 fake timers 模拟宏任务调度
Jest 内置的 jest.useFakeTimers() 可拦截 setTimeout 等 API，让你手动推进时间，从而控制宏任务的执行节奏：
- 调用
jest.useFakeTimers()启用模拟 - 触发待测函数（它内部调用
setTimeout等） - 用
jest.runAllTimers()或jest.advanceTimersByTime(ms)主动“翻过”宏任务队列 - 断言副作用（如状态更新、回调调用、DOM 变化）是否发生
✅ 示例：验证一个防抖函数是否延迟执行
function debounce(fn, delay) {
let timer;
return () => {
clearTimeout(timer);
timer = setTimeout(fn, delay);
};
}
test('debounce calls fn after delay in macro task', () => {
jest.useFakeTimers();
const mockFn = jest.fn();
const debounced = debounce(mockFn, 100);
debounced();
expect(mockFn).not.toHaveBeenCalled();
jest.advanceTimersByTime(50);
expect(mockFn).not.toHaveBeenCalled();
jest.advanceTimersByTime(50); // 总共 100ms
expect(mockFn).toHaveBeenCalledTimes(1);
});
用 async/await + waitFor 等待真实异步完成（推荐用于集成感强的测试）
当不希望 mock 定时器（比如想测真实行为或与 React Testing Library 配合），可用 await waitFor 等待宏任务产生的可观察结果：
- 适用于测试 UI 渲染、状态更新、事件响应等有明确输出的场景
- 依赖的是“效果可见”，而非“时间精确”，更贴近用户视角
- 需确保测试环境支持 Promise 微任务（现代 Jest 默认支持）
✅ 示例（React + RTL）：
test('fetches data and renders after setTimeout', async () => {
jest.mock('./api', () => ({
fetchData: () => Promise.resolve({ id: 1 }),
}));
render(<MyComponent />);
await waitFor(() => {
// 这里会等待直到组件内 setTimeout 触发 setState 并完成渲染
expect(screen.getByText(/loading/i)).toBeInTheDocument();
});
// 假设组件在 setTimeout 后更新为 success 状态
await waitFor(() => {
expect(screen.getByText(/success/i)).toBeInTheDocument();
});
});
避免常见误区：不测“谁先谁后”，而测“是否进入队列+是否执行”
❌ 错误目标：写测试断言 “setTimeout 一定比 Promise.then 晚执行” —— 这是 JS 运行时规范，不是你代码的责任。
✅ 正确目标：
- 你的函数是否调用了
setTimeout？→ 用jest.spyOn(global, 'setTimeout')断言被调用 - 传入的回调是否在预期条件下被调用？→ 用 mock 回调 + fake timers 或 waitFor 验证
- 多个宏任务之间是否有正确的取消/重置逻辑？→ 模拟连续调用，检查前序定时器是否被清除
补充：测试 postMessage、requestIdleCallback 等非定时器宏任务
这类 API 也可 mock：
-
postMessage：重写global.postMessage为 mock 函数，再用jest.runAllTimers()触发消息事件循环（注意：跨上下文消息需配合onmessage监听） -
requestIdleCallback：Jest 不自动 mock，需手动 mock 并立即调用传入的 callback，或使用jest.runAllTimers()（部分环境兼容） - Node.js 中的
setImmediate/process.nextTick：注意区分宏任务 vs 微任务；setImmediate是宏任务，可用jest.runAllImmediates()
不复杂但容易忽略：所有 fake timers 操作后，建议在 afterEach 中调用 jest.useRealTimers() 复位，避免影响其他测试。
