Тестирование кастомных хуков может быть несколько сложнее, чем тестирование обычных функций, потому что хуки зависят от React-окружения. Однако, React Testing Library предоставляет инструменты для тестирования хуков.

Пример кастомного хука:

import { useState, useEffect } from 'react';
 
function useCounter(initialCount) {
  const [count, setCount] = useState(initialCount);
 
  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
 
    return () => clearInterval(interval);
  }, []);
 
  return count;
}
 
export default useCounter;

Пример теста для кастомного хука:

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';
 
test('useCounter increments the count', () => {
  const { result } = renderHook(() => useCounter(0));
 
  expect(result.current).toBe(0);
 
  act(() => {
    jest.advanceTimersByTime(1000);
  });
 
  expect(result.current).toBe(1);
 
  act(() => {
    jest.advanceTimersByTime(1000);
  });
 
  expect(result.current).toBe(2);
});

Пояснение:

1. Импорт renderHook и act: Используйте renderHook для рендеринга кастомного хука и act для обновления состояния.
2. Рендеринг хука: Используйте renderHook для рендеринга хука с начальным значением.
3. Проверка начального состояния: Используйте expect для проверки начального состояния.
4. Обновление состояния: Используйте act для обновления состояния хука. В данном случае, мы используем jest.advanceTimersByTime для продвижения времени и вызова эффектов.
5. Проверка обновленного состояния: Используйте expect для проверки обновленного состояния.

act() — это функция, предоставляемая React Testing Library, которая используется для обертывания кода, который вызывает обновления состояния или рендеринг компонентов. Это гарантирует, что все обновления состояния и рендеринг будут завершены до того, как вы начнете делать утверждения.

Назад