JavaScript单元测试中需mock requestAnimationFrame以同步可控执行，避免异步不稳；常用Jest模拟、帧队列控制（advanceFrame/flushFrames）或结合act/waitFor验证DOM动画效果。
在 JavaScript 单元测试中控制动画帧（requestAnimationFrame）的执行，核心是**替换或拦截原生 requestAnimationFrame 和 cancelAnimationFrame，使其同步、可预测、可推进**。这能避免测试因异步渲染帧而出现时序不稳定、超时或断言失败的问题。
用 Jest 模拟 rAF（最常用）
在 Jest 环境中，可通过 jest.mock 或直接重写全局方法来接管 rAF：
- 在测试前 mock 全局
requestAnimationFrame，让它立即调用回调（模拟“下一帧立刻执行”）：
beforeEach(() => {
jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
cb();
return 1; // 返回任意 id，cancelAnimationFrame 通常不在此类测试中被验证
});
});
- 若需精确控制“推进一帧”或“推进多帧”，推荐使用
@testing-library/user-event或封装一个简易帧控制器：
let frameCallbacks = [];
<p>beforeEach(() => {
jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
frameCallbacks.push(cb);
return frameCallbacks.length;
});</p><p>jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
});</p><p>// 手动触发一帧
function advanceFrame() {
const cb = frameCallbacks.shift();
if (cb) cb();
}</p><p>// 触发所有待执行帧
function flushFrames() {
while (frameCallbacks.length > 0) {
advanceFrame();
}
}
使用 Fake Timers + 自定义 rAF 行为
Jest 的 jest.useFakeTimers() 默认不处理 rAF，但可以配合手动模拟实现时间驱动的帧控制：
- 启用 fake timers 后，自己实现一个基于
setTimeout的 rAF 替代方案（例如每 16ms 触发一帧），再通过jest.advanceTimersByTime(16)推进单帧； - 更实用的做法是：不依赖真实时间间隔，而是将 rAF 回调收集到队列，用
flushFrames()显式清空——这样测试逻辑更稳定、不依赖系统性能。
测试真实 DOM 动画时用 waitFor + act（React / RTL 场景）
若组件内使用了 CSS 动画、transform 过渡或依赖浏览器渲染管线（如 getBoundingClientRect 在 rAF 后才更新），需结合：
立即学习“Java免费学习笔记（深入）”；
-
act()包裹触发行为（确保 React 渲染完成）； -
waitFor等待 DOM 属性/样式实际变化（如element.style.transform更新）； - 必要时搭配
await new Promise(requestAnimationFrame)确保进入下一帧（仅限非严格模式或需精确时机的场景）：
await act(async () => {
fireEvent.click(button);
await new Promise(requestAnimationFrame); // 等一帧
});
expect(element).toHaveStyle('transform: translateX(100px)');
避免陷阱：不要依赖真实 rAF 时间
真实 requestAnimationFrame 受屏幕刷新率、主线程负载、后台标签页节流等影响，在 CI 或低配机器上极易失败：
- ❌ 不要写
setTimeout(() => { /* 断言 */ }, 20)等魔数等待； - ❌ 不要在测试中保留未 mock 的原生 rAF；
- ✅ 始终 mock 或拦截 rAF，让帧执行由测试逻辑显式驱动；
- ✅ 对复杂动画逻辑，可抽离 rAF 调用为可注入的依赖（如
rafFn = requestAnimationFrame），便于测试时替换。
