Как в Jest проверить состояние блока, после его обновления при помощи анимации?

У меня проблема: грубо говоря, есть state

const [foo, setFoo] = useState('foo');

и есть кнопка, которая обновляет это сотояние с двумя задержками: по таймауту + по анимации:

const Component = () => {
    const [foo, setFoo] = useState(123');

    const handleAnimation = (callback, start, end, duration) =>  {
       // здесь логика анимации с использованием  requestAnimationFrame
       window.requestAnimationFrame();
    }

    const handleClick = () => {
        setTimeout(() => {
            handleAnimation(setFoo, foo, 567);
        }, 2000);
    }
    
    return (
      <div testId="testing-id">{foo}</div>
      <button onClick={handleClick}>Click</button> 
    )
}

Проблема заключается в том, что findByTestId всегда возвращает самое первое значение и не может получить новое значение (то, которое формируется после просчета анимации. Если убрать вызов анимации и просто менять стейт, то всё работает хорошо. Интересует путь решения проблемы: например, заглушить requestAnimationFrame или setTimeout, либо программно дождаться выполнения анимации, но мне это не помогло. Прошу о помощи, спасибо.


Ответы (0 шт):