如何在 Jest 测试中等待 CSS 动画结束以验证点击回调-js教程-PHP中文网

在 jsdom 环境中，animationend 事件默认不触发，需手动触发该事件才能正确测试动画结束后执行的回调函数。

在 jsdom 环境中，`animationend` 事件默认不触发，需手动触发该事件才能正确测试动画结束后执行的回调函数。

React 组件中常借助 `onAnimationEnd` 在 CSS 动画完成后执行逻辑（如重置状态、调用回调），但在 Jest + React Testing Library 的默认测试环境中（基于 jsdom），`animationend` 事件**不会自动触发**——因为 jsdom 并未实现完整的 CSS 动画 API（[jsdom issue #3239](https://github.com/jsdom/jsdom/issues/3239)）。因此，即使组件逻辑正确，测试也会因回调未执行而失败。

要可靠地测试此类行为，关键在于显式模拟 animationend 事件，而非依赖真实动画时长或 await waitFor 等异步等待（jsdom 中动画无实际持续时间，setTimeout 或 jest.advanceTimersByTime() 均无效）。

✅ 正确做法：使用 fireEvent.animationEnd(element) 主动触发事件：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

import { render, screen, fireEvent } from '@testing-library/react';
import { Valuable } from './Valuable';

describe('Valuable', () => {
  const onClickMock = jest.fn();
  const setup = () => render(<valuable onclick="{onClickMock}"></valuable>);

  beforeEach(() => {
    onClickMock.mockClear();
    setup();
  });

  it('should execute onClick callback after animation ends', () => {
    const container = screen.getByTestId('valuable-container');

    // 第一次点击 → 触发动画，但尚未结束
    fireEvent.click(container);
    expect(onClickMock).not.toHaveBeenCalled();

    // 手动触发 animationend → 回调应执行
    fireEvent.animationEnd(container);
    expect(onClickMock).toHaveBeenCalledTimes(1);

    // 多次点击+触发：验证可重复性
    fireEvent.click(container);
    fireEvent.animationEnd(container);
    fireEvent.click(container);
    fireEvent.animationEnd(container);
    expect(onClickMock).toHaveBeenCalledTimes(3);
  });
});

⚠️ 注意事项：

不要使用 await waitFor(() => expect(...).toBeCalled()) —— 因为 animationend 根本不会自动发生，waitFor 将超时；
避免在测试中 mock useState 或劫持 setIsClicked，这会掩盖真实渲染与事件流；
若组件内含多个动画（如 transitionend 或 webkitAnimationEnd），需按需补充对应事件（fireEvent.transitionEnd 等），但标准 animationEnd 已覆盖绝大多数场景；
确保 CSS 动画类（如 animate-valuable）在测试环境中有定义（可通过 jest.mock 注入样式或确保测试 bundle 包含样式）。

总结：在 jsdom 中测试动画结束逻辑，核心原则是「主动触发，而非被动等待」。fireEvent.animationEnd() 是轻量、可靠且符合 RTL 最佳实践的解决方案，既保持测试速度，又精准验证事件驱动流程。