react-testing库和onAnimationEnd

Question

给定一个包含一些CSS动画的组件(例如滑入/滑出)：

function MyComponent(props) {
  return (
    <div
      className="with-animations"
      onAnimationEnd={() => {
        // set internal state
        // logic which needs coverage
      }}
    >
      {props.children}
    </div>
  );
}

如何验证onAnimationEnd事件处理程序中的代码已被调用？

有没有办法解决这个问题？

Answer 1

您可以在div元素上使用fireEvent.animationEnd()触发onAnimatedEnd事件。

假设您的组件如下所示：

function MyComponent(props) {
    return (
        <div
            data-testid="animationDiv"
            className="with-animations"
            onAnimationEnd={() => {
                console.log('onAnimationEnd called')
            }}
        >
            {props.children}
        </div>
    );
}

您的测试可能如下所示：

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

it('test', () => {
    const logSpy = jest.spyOn(console, 'log');
    render(<MyComponent />);
    fireEvent.animationEnd(screen.getByTestId('animationDiv'));
    expect(logSpy).toHaveBeenCalledWith('onAnimationEnd called');
});