Тестування асинхронних оперцій у React з використанням Jest: підходи та вирішення

9 Березня 2024 в 00:57 53

Тестування компонентів React, які використовують асинхронні операції та ефекти, може стати викликом, особливо коли мова йде про використання setTimeout у хуках useEffect. Це стає ще складнішим, коли використовується бібліотека Jest для тестування, яка має свої особливості симуляції часу. Проблема, з якою розробники часто зустрічаються, полягає в некоректній роботі таймерів при тестуванні, що може призвести до неправильних результатів тестів або потреби в рефакторингу коду компонента для кращої тестової сумісності.

Давайте розглянемо типовий сценарій, де компонент використовує useEffect з setTimeout для створення простого таймера, який оновлює стан кожну секунду. Код може виглядати так:

useEffect(() => {
  if (countDown !== 0) {
    const timer = setTimeout(() => {
      setCountDown(countDown - 1);
    }, 1000);
    return () => clearTimeout(timer);
  }
}, [countDown]);

useEffect(() => {

if (countDown !== 0) {

const timer = setTimeout(() => {

setCountDown(countDown - 1);

}, 1000);

return () => clearTimeout(timer);

}

}, [countDown]);

І тест для нього:

it('should correctly count down from 60 to 58', async () => {
  jest.useFakeTimers();
  const { queryByText } = render(<YourComponent />);
  expect(queryByText('60')).toBeTruthy();
  act(() => {
    jest.advanceTimersByTime(2100);
  });
  expect(queryByText('58')).toBeTruthy();
});

it('should correctly count down from 60 to 58', async () => {

jest.useFakeTimers();

const { queryByText } = render(<YourComponent />);

expect(queryByText('60')).toBeTruthy();

act(() => {

jest.advanceTimersByTime(2100);

});

expect(queryByText('58')).toBeTruthy();

});

Під час виконання тесту може виникнути проблема, що setTimeout всередині useEffect викликається лише один раз, незважаючи на те, що ми “просунули” час на 2100 мілісекунд, очікуючи, що стан зменшиться двічі. Ця проблема виникає через те, як Jest маніпулює часом та як React очищає та повторно створює ефекти на основі залежностей.

Ось кілька стратегій, які можуть допомогти вирішити або обійти цю проблему:

Використання `jest.runOnlyPendingTimers()`

Метод jest.runOnlyPendingTimers() може допомогти в ситуаціях, де вам потрібно виконати всі заплановані таймери без стрибка в часі вперед. Це може забезпечити більш точне виконання таймерів у вашому тесті.

Рефакторинг компонента

Іноді проблему можна вирішити, змінивши підхід до реалізації логіки у вашому компоненті. Наприклад, замість використання локального стану та ефектів, можна реалізувати логіку таймера за допомогою зовнішнього сервісу або кастомного хука, який керує таймером і станом більш ефективно.

Тестування з `jest.advanceTimersToNextTimer()`

Метод jest.advanceTimersToNextTimer() дозволяє “просунути” час до наступного таймера, що дуже корисно, коли вам потрібно тестувати поведінку, яка залежить від кількох послідовних таймерів. Цей метод може допомогти точніше симулювати поведінку таймерів у вашому тесті.

Використання альтернативних бібліотек

Іноді використання стандартних засобів Jest не дає змоги ефективно тестувати комплексні асинхронні поведінки. У такому випадку може бути корисним розглянути використання додаткових бібліотек для тестування асинхронного коду, наприклад, testing-library для React, яка надає розширені можливості для роботи з асинхронними процесами.

Заключні думки

Тестування асинхронного коду в React, особливо коли використовуються таймери та ефекти, може бути складним, але водночас вкрай важливим для забезпечення надійності вашого додатка. Використання правильних методів та підходів до тестування може значно спростити цей процес та допомогти уникнути типових помилок. Головне тут — глибше розуміння як працює Jest та React, так і здатність креативно підходити до рішення проблем, що виникають під час тестування.