Как тестировать хуки в React с @testing-library/react-hooks

Привет, Хабр!

Сегодня рассмотрим, как тестировать React-хуки с помощью @testing-library/react-hooks.

Подход к базовым хукам

Сначала тестить будем на примере простого счётчика. Вот у нас хук:

import { useState, useCallback } from 'react'  export default function useCounter() {   const [count, setCount] = useState(0)   const increment = useCallback(() => setCount((x) => x + 1), [])   return { count, increment } }

Хуки не рендерятся напрямую, их нужно оборачивать через renderHook. Всё как с тестами компонентов, только у нас тут немного алхимии:

import { renderHook } from '@testing-library/react-hooks' import useCounter from './useCounter'  test('should initialize counter', () => {   const { result } = renderHook(() => useCounter())    expect(result.current.count).toBe(0)   expect(typeof result.current.increment).toBe('function') })

result.current — это всегда актуальное значение. Нельзя деструктурировать const { count } = result.current в начале и потом ожидать, что оно обновится — это снимок, а не ссылка. И вот тут ловят баги те, кто думает, что это как ref.

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

import { renderHook, act } from '@testing-library/react-hooks'  test('should increment counter', () => {   const { result } = renderHook(() => useCounter())    act(() => {     result.current.increment()   })    expect(result.current.count).toBe(1) })

Без act() React может выкинуть ворнинг. Иногда даже не в этом тесте, а в следующем.

Передача параметров и сброс состояния

Теперь добавим чуть больше реальности. Скажем, наш счётчик может принимать initialValue и делать reset():

export default function useCounter(initialValue = 0) {   const [count, setCount] = useState(initialValue)   const increment = useCallback(() => setCount((x) => x + 1), [])   const reset = useCallback(() => setCount(initialValue), [initialValue])   return { count, increment, reset } }

И теперь хочется протестировать изменение initialValue при перерендере. Вот простой способ:

test('should reset to new initial value after rerender', () => {   let initial = 5   const { result, rerender } = renderHook(() => useCounter(initial))    initial = 10   rerender()    act(() => result.current.reset())    expect(result.current.count).toBe(10) })

Но на проде у вас, скорее всего, будет куча пропсов. Там let не спасает. Поэтому лучше использовать initialProps:

test('should reset to updated initial value with initialProps', () => {   const { result, rerender } = renderHook(({ init }) => useCounter(init), {     initialProps: { init: 3 }   })    rerender({ init: 7 })    act(() => result.current.reset())    expect(result.current.count).toBe(7) })

Именно так можно протестировать поведение хука при смене параметров — и не попасть в ловушку мутабельных переменных.

Работа с контекстом и обёртками

Как только в хук прилетает useContext — дело усложняется. Но не критично. Всё решается wrapper-компонентом.

Вот как может выглядеть CounterContext:

const CounterStepContext = React.createContext(1)  export const CounterStepProvider = ({ step, children }) => (   <CounterStepContext.Provider value={step}>{children}</CounterStepContext.Provider> )  export function useCounter(initialValue = 0) {   const [count, setCount] = useState(initialValue)   const step = useContext(CounterStepContext)   const increment = useCallback(() => setCount((x) => x + step), [step])   return { count, increment } }

А вот тест с контекстом:

test('should increment with custom context step', () => {   const wrapper = ({ children }) => <CounterStepProvider step={2}>{children}</CounterStepProvider>    const { result } = renderHook(() => useCounter(), { wrapper })    act(() => result.current.increment())    expect(result.current.count).toBe(2) })

Можно и динамически менять step:

test('should change step on rerender', () => {   const wrapper = ({ children, step }) => (     <CounterStepProvider step={step}>{children}</CounterStepProvider>   )    const { result, rerender } = renderHook(() => useCounter(), {     wrapper,     initialProps: { step: 2 }   })    act(() => result.current.increment())   expect(result.current.count).toBe(2)    rerender({ step: 5 })   act(() => result.current.increment())    expect(result.current.count).toBe(7) })

Если вам ESLint начнёт жаловаться на отсутствие displayName, просто отключите это правило в тесте:

/* eslint-disable react/display-name */

Иногда проще отключить один раз, чем писать отдельный компонент-обёртку.

Асинхронные хуки и waitForNextUpdate

Когда в хук завозят setTimeout, fetch, debounce, — всё, обычный expect уже не работает. Тут нужен waitForNextUpdate():

export function useCounter(initialValue = 0) {   const [count, setCount] = useState(initialValue)   const increment = useCallback(() => setCount(x => x + 1), [])   const incrementAsync = useCallback(() => setTimeout(increment, 100), [increment])   return { count, increment, incrementAsync } }

Тест:

test('should async increment after delay', async () => {   const { result, waitForNextUpdate } = renderHook(() => useCounter())    result.current.incrementAsync()    await waitForNextUpdate()    expect(result.current.count).toBe(1) })

act() тут не нужен — waitForNextUpdate() уже оборачивает всё в act под капотом. Но если вы используете кастомный async-поток, то может понадобиться waitFor().

И ещё: если вы тестируете debounce, throttle или requestAnimationFrame — скорее всего, стоит подменить таймеры через jest.useFakeTimers().

Обработка ошибок и граничные случаи

И наконец, тестировать ошибки. Да, можно и это. Вот хук, который выкидывает исключение, если счётчик выше 9000:

export function useCounter(initialValue = 0) {   const [count, setCount] = useState(initialValue)   const increment = useCallback(() => setCount((x) => x + 1), [])      if (count > 9000) {     throw new Error("It's over 9000!")   }    return { count, increment } }

И вот как это тестируется:

test('should throw when over 9000', () => {   const { result } = renderHook(() => useCounter(9000))    act(() => result.current.increment())    expect(result.error).toEqual(Error("It's over 9000!")) })

result.error — редкая, но полезная штука. Она содержит исключение, если оно произошло в процессе рендера. Такой способ отлично подходит для useMemo, useEffect, useReducer — если ошибка происходит на первом рендере.

Подробнее с инструментом можно ознакомиться здесь.

---

Готовы углубить знания в React и освоить эффективное тестирование хуков? Приглашаем вас на два открытых урока, где опытные эксперты расскажут, как правильно использовать @testing‑library/react‑hooks и работать с асинхронными сценариями:

1. Как стать уверенным JavaScript‑разработчиком: план от джуна до мидла — 10 июля в 20:00

2. Зачем JavaScript‑разработчику понимать бэкенд? От fetch до Node.js — 23 июля в 20:00

Кроме того, пройдите вступительный тест и узнайте, насколько хорошо вы уже владеете тестированием React‑компонентов и хуков. Это отличный способ выявить свои сильные стороны и области для развития.