Вопрос с собеседования · Frontend

Как тестировать пользовательские хуки?

MiddleReact
Ещё спрашивают так:
  • Что такое renderHook?
Коротко

Хук нельзя вызвать вне компонента, поэтому используют renderHook из Testing Library: он рендерит служебный компонент и отдаёт result.current — текущее возвращаемое значение. Действия, меняющие состояние, оборачивают в act; асинхронные результаты ждут через waitFor. Если хуку нужны провайдеры (QueryClient, роутер, контекст) — передают wrapper. Таймеры — vi.useFakeTimers / jest.useFakeTimers.

  • Часто проще тестировать компонент, использующий хук
  • rerender с новыми props — проверить реакцию на изменения
  • result.current читать после act, а не сохранять заранее

А ещё Тест должен проверять поведение хука, а не его внутренности

Подробно

const { result } = renderHook(() => useCounter(1));
act(() => result.current.inc());
expect(result.current.count).toBe(2);

Что хотят услышать

  • renderHook и result.current.
  • act и waitFor.
  • wrapper для провайдеров.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Хук можно вызвать напрямую в тесте как обычную функцию, без компонента-обёртки
  • ✗Хуки тестировать нельзя
  • ✓Через renderHook: значение в result.current, изменения — в act, асинхронное — через waitFor
  • ✗result.current сохраняют до act и сравнивают после

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования