如何在React Jest测试中快进至动画结束状态

先帮你修正组件里的两个小拼写错误，不然组件本身可能跑不起来：

• componentDiDMount → componentDidMount
• ReactDOM.findDOMNOde → ReactDOM.findDOMNode

接下来针对Jest不等待TweenMax动画完成的问题，分享两种实用解决方案：

方案一：Mock TweenMax直接触发回调（推荐，测试更高效） #

咱们的测试重点是动画完成后组件的状态更新与渲染结果，而非TweenMax本身的动画逻辑，所以直接mock掉TweenMax的to方法，手动触发onComplete回调即可：

// 在测试文件顶部mock TweenMax
jest.mock('gsap/TweenMax', () => ({
  to: jest.fn((_element, _duration, options) => {
    // 直接执行动画完成回调
    if (options.onComplete) {
      options.onComplete();
    }
  })
}));

describe("HelloWorld组件测试",()=>{
  it("动画完成后显示Hello World", ()=>{
    const component = mount(<HelloWorld />);
    // 无需等待，mock已触发回调更新state
    expect(component.find('p').text()).toEqual("Hello World");
    // 还可以验证TweenMax.to是否被正确调用
    expect(require('gsap/TweenMax').to).toHaveBeenCalled();
  })
})

方案二：用GSAP自身时间控制快进动画 #

如果需要模拟真实的时间流逝（比如测试动画过程中的中间状态），可以用GSAP的全局时间API手动跳转到动画完成的时间点：

import TweenMax from 'gsap/TweenMax';
import { mount } from 'enzyme';
import HelloWorld from './HelloWorld';

describe("HelloWorld组件测试",()=>{
  it("动画完成后显示Hello World", ()=>{
    const component = mount(<HelloWorld />);
    
    // 直接将GSAP时间快进到1秒（对应动画的持续时长）
    TweenMax.update(1);
    // 强制组件重新渲染，同步state更新后的视图
    component.update();
    
    expect(component.find('p').text()).toEqual("Hello World");
  })
})

为什么jest.runAllTimers()没用？ #

因为TweenMax没有使用Jest模拟的setTimeout/setInterval定时器，而是基于requestAnimationFrame或自身的时间管理系统运行，所以Jest的fake timers对它不起作用，必须用GSAP原生的方法来控制时间。

内容的提问来源于stack exchange，提问作者a.barbieri