How do you test a Custom Hook separately with RTL's renderHook?

Short answer

Call renderHook(() => useCustomHook()), which creates a test component to run the Hook and returns a result object with its current value and a rerender method.

Explanation

Hooks cannot be called outside React components, so RTL's renderHook runs and tests them separately from the UI. Read returned values through result.current. Actions that update state may need to be wrapped in act() when called directly.

Code example

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('Increments the value in Custom Hook', () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

Common mistakes

• Copying result.current into a local variable and reading it later, which misses updates because the internal reference changes.

Follow-up questions

• What is the philosophy of React Testing Library (RTL), and how does it differ from the old Enzyme tests?

Sources

• Testing Library docs — renderHook