如何等待动画结束后测试React组件的点击回调？

问题原因 #

你的组件逻辑是点击后添加动画类，只有当动画结束触发onAnimationEnd事件时，才会调用传入的onClick回调。但Jest测试环境中不会自动运行CSS动画，点击后动画不会自然结束，所以animationend事件从未被触发，导致回调没执行，测试报错。

解决方案 #

直接在测试中手动触发animationend事件，模拟动画结束的场景。每次点击容器后，触发该事件即可让组件执行后续的回调逻辑。

修改后的测试代码 #

describe('Valuable', () => {
  const valuableProps = {
    onClick: jest.fn(),
  };
  beforeEach(() => {
    render(<Valuable {...valuableProps} />);
  });

  it('should execute on click callback after animation ends', () => {
    expect(valuableProps.onClick).not.toHaveBeenCalled();
    const container = screen.getByTestId('valuable-container');
    
    // 第一次点击 + 触发动画结束
    fireEvent.click(container);
    fireEvent.animationEnd(container);
    expect(valuableProps.onClick).toBeCalledTimes(1);

    // 第二次点击 + 触发动画结束
    fireEvent.click(container);
    fireEvent.animationEnd(container);
    // 第三次点击 + 触发动画结束
    fireEvent.click(container);
    fireEvent.animationEnd(container);
    
    expect(valuableProps.onClick).toBeCalledTimes(3);
  });
});

额外说明 #

如果你的测试不需要验证动画本身，也可以通过以下方式简化：

• 直接调用组件内部的handleAnimationEnd方法（但需要借助render返回的实例或act包裹，不过手动触发事件更贴近真实用户行为）
• 模拟CSS动画执行，强制状态同步更新，但手动触发事件是最直观且符合测试最佳实践的方式。

内容的提问来源于stack exchange，提问作者Miguel Angel GEQ