I'm using this npm package. crello/react-lottie I have a function that gets called when the Lottie animation is paused. The function checks to see if the currentFrame is greater than a specific number. I'm unable to get the animation in my test library to play to completion.
Example of what I'm trying to do.
useEffect(() => {
switch (state) {
case 'paused:
const { currentFrame } = refAnimation.current;
if (currentFrame > 30) {
..... // need to test for this if
}
break;
default:
}
}, [status]);
All the above runs fine but the currentFrame never advances. Always stays at 0 in my unit tests. Works outside of testing.
Here is how I'm testing it.
it("should stop at 30 frames", () => {
const { container } = render(
<LottieComponent data={lottieData} status='start' />,
);
await waitFor(() => jest.advanceTimersByTime(60));
rerender(<LottieComponent data={lottieData} status='paused' />);
});
I was hoping that jest.advanceTimersByTime(60) might advance the player to currentFrame 60 but this is not the case. Anyone know how I might get the animation to advance in tests.
I'm using react test library for testing.