Как проверить анимацию с одинаковыми начальной и конечной точкой?

Question

У меня есть компонент, который «встряхивает», когда 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>
  );
};

Анимации, которые я тестировал ранее, были более или менее просто переходами из одного состояния в другое, например, непрозрачность от 0 до 1. Это было легко проверить с помощью реагирующей-тестирующей библиотеки, я просто назвал .toHaveStyle утверждение от шутки.

Однако в этом компоненте моя анимация использует комбинацию диапазона и вывода. Сначала он начинается с поворота на 0 градусов, затем идет до 0,5 градусов и, наконец, возвращается к 0 градусов. Поэтому использование

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

может быть ложным срабатыванием, поскольку анимация может даже не запускаться.

Эта анимация основана на пружине, приводится в действие реагирующей пружиной, а не основана на времени, поэтому я не могу точно сказать, когда сработала середина анимации.

У кого-нибудь есть идея решить эту проблему?