How to test an animation that has same start and endpoint?

Question

I have a component that "shakes" when animated prop is set to true. This is how it looks

const Shake = ({ animate, children, ...props }) => {
  const { x } = useSpring({
    from: { x: 0 },
    x: animate ? 1 : 0,
    config: { mass: 12, tension: 500, friction: 80 },
  });
  return (
    <animated.div
      style={{
        transformOrigin: 'center center',
        transform: animate && x
          .interpolate({
            range: [0, 0.5, 1],
            output: [0, 2, 0],
          })
          .interpolate((x) => `rotate(${x}deg)`),
      }}
      {...props}
    >
      {children}
    </animated.div>
  );
};

Animations I tested before were more or less just transitions from one state to another, like opacity from 0 to 1. It was easy to test with react-testing-library, I just called the .toHaveStyle assertion from jest-dom.

However on this component my animation uses a combination of range and output. At first it will start by rotation of 0deg, then it goes to 0.5deg and finally back to 0deg. So just using

.toHaveStyle(`transform: rotate(0deg)`)

could be a false positive because the animation might not even be triggered.

This animation is spring based, powered by react-spring, and not time based so I cannot say exactly when the middle of the animation is triggered.

Does anybody have an idea to solve this?

Monazite