react-testing-library 和 onAnimationEnd

Question

Given a component which has some CSS animations (such as sliding in/out):

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

How can I verify that the code within the onAnimationEnd event handler was invoked?

Is there a way to mock this out?

Answer 1

You can trigger the onAnimatedEnd event with fireEvent.animationEnd() on the div element.

Assuming your component looks like the following:

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

Your test could look like:

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');
});