Reactjs 如何测试具有相同起点和终点的动画？

当

animated

prop设置为true时，我有一个组件会“抖动”。这就是它的样子

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

可能是误报，因为动画甚至可能未被触发

这个动画是基于spring的，由react-spring提供动力，而不是基于时间，所以我不能确切地说动画的中间部分何时被触发

有人有办法解决这个问题吗

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