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

Question

我有一个组件，当animatedprop 设置为 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>
  );
};

我之前测试过的动画或多或少只是从一种状态转换到另一种状态，比如从 0 到 1 的不透明度。用 react-testing-library 测试很容易，我只是.toHaveStyle从 jest-dom 中调用了断言。

但是在这个组件上，我的动画使用了范围和输出的组合。首先它会从 0deg 旋转开始，然后它会变成 0.5deg，最后回到 0deg。所以只需使用

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

可能是误报，因为动画甚至可能不会被触发。

这个动画是基于 spring 的，由 react-spring 提供支持，而不是基于时间的，所以我不能确切地说动画的中间是什么时候触发的。

有没有人有解决这个问题的想法？