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