How to test Lottie currentFrame in jest

Viewed 722

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.

0 Answers
Related