React · Testing

Hook Testing

Learn how to test custom React hooks in isolation using renderHook from React Testing Library. Master testing hook state, side effects, and complex hook logic.

Find videos you like?

Save to resource drawer for future reference!

Why Test Hooks?

Custom hooks need isolated testing

Custom hooks contain reusable logic that you want to test independently from components. Testing hooks in isolation ensures your logic works correctly before using it across your app.

React Testing Library provides renderHook() specifically for testing hooks without needing a full component!

Isolated Testing

Test hook logic independently without rendering components.

Faster Tests

No DOM rendering needed, hooks tests run lightning fast.

Reusable Logic

Ensure your shared hook logic works before using it everywhere.

Try a Custom useCounter Hook

See a custom hook in action! This useCounter hook provides state and functions. We'll learn to test it in isolation.

Custom Hook

State Management

Function Returns

Hook Preview

See useCounter hook in action

useCounter Hook Demo

Frontend

<div id="root"></div>

Live Preview

Loading preview...

The renderHook Function

Your tool for testing hooks

The renderHook() function from React Testing Library lets you test hooks without creating a component. It returns the hook's result and helper functions.

Basic Structure

1. Call renderHook

const { result } = renderHook(() => useCounter())

2. Access Current Value

result.current.count // Get hook's return value

3. Call Hook Functions

act(() => result.current.increment())

4. Assert New Value

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

Important: Use result.current

Always access hook values through result.current. This ensures you're reading the most up-to-date value after state changes!

Test 1: Basic Hook Testing

Test initial state and simple updates

Testing useCounter Hook

javascript

Test hook initialization and state updates

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

describe('useCounter Hook', () => {
  test('initializes with default value of 0', () => {
    const { result } = renderHook(() => useCounter());
    
    expect(result.current.count).toBe(0);
  });

  test('initializes with custom value', () => {
    const { result } = renderHook(() => useCounter(10));
    
    expect(result.current.count).toBe(10);
  });

  test('increments count', () => {
    const { result } = renderHook(() => useCounter());
    
    act(() => {
      result.current.increment();
    });
    
    expect(result.current.count).toBe(1);
  });

  test('decrements count', () => {
    const { result } = renderHook(() => useCounter(5));
    
    act(() => {
      result.current.decrement();
    });
    
    expect(result.current.count).toBe(4);
  });

  test('resets to initial value', () => {
    const { result } = renderHook(() => useCounter(10));
    
    act(() => {
      result.current.increment();
      result.current.increment();
    });
    expect(result.current.count).toBe(12);
    
    act(() => {
      result.current.reset();
    });
    
    expect(result.current.count).toBe(10);
  });
});

Console Output

❯✓ useCounter Hook › initializes with default value of 0 (8ms)

❯✓ useCounter Hook › initializes with custom value (6ms)

❯✓ useCounter Hook › increments count (9ms)

❯✓ useCounter Hook › decrements count (7ms)

❯✓ useCounter Hook › resets to initial value (11ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 5 passed, 5 total

// ✅ All hook tests passed!

Test 2: Updating Hook Props

Test hooks when props change

Testing Hook Prop Changes with rerender

javascript

Use rerender to update hook arguments

import { renderHook } from '@testing-library/react';
import { useUserData } from './useUserData';

describe('useUserData Hook - Props', () => {
  test('returns data for initial user ID', () => {
    const { result } = renderHook(
      ({ userId }) => useUserData(userId),
      { initialProps: { userId: 1 } }
    );
    
    expect(result.current.userId).toBe(1);
  });

  test('updates when user ID changes', () => {
    const { result, rerender } = renderHook(
      ({ userId }) => useUserData(userId),
      { initialProps: { userId: 1 } }
    );
    
    expect(result.current.userId).toBe(1);
    
    // Rerender with new props
    rerender({ userId: 2 });
    
    expect(result.current.userId).toBe(2);
  });

  test('handles multiple prop updates', () => {
    const { result, rerender } = renderHook(
      ({ userId }) => useUserData(userId),
      { initialProps: { userId: 1 } }
    );
    
    expect(result.current.userId).toBe(1);
    
    rerender({ userId: 2 });
    expect(result.current.userId).toBe(2);
    
    rerender({ userId: 3 });
    expect(result.current.userId).toBe(3);
  });
});

Console Output

❯✓ useUserData Hook - Props › returns data for initial user ID (10ms)

❯✓ useUserData Hook - Props › updates when user ID changes (12ms)

❯✓ useUserData Hook - Props › handles multiple prop updates (14ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Hook props testing works!

Test 3: Hooks with useEffect

Test hooks that perform side effects

Testing Side Effects

javascript

Test hooks that use useEffect or call APIs

import { renderHook, waitFor } from '@testing-library/react';
import { useDocumentTitle } from './useDocumentTitle';

describe('useDocumentTitle Hook - Side Effects', () => {
  // Store original title
  const originalTitle = document.title;
  
  afterEach(() => {
    // Restore original title after each test
    document.title = originalTitle;
  });

  test('sets document title on mount', () => {
    renderHook(() => useDocumentTitle('New Title'));
    
    expect(document.title).toBe('New Title');
  });

  test('updates document title when it changes', () => {
    const { rerender } = renderHook(
      ({ title }) => useDocumentTitle(title),
      { initialProps: { title: 'First Title' } }
    );
    
    expect(document.title).toBe('First Title');
    
    rerender({ title: 'Second Title' });
    
    expect(document.title).toBe('Second Title');
  });

  test('restores original title on unmount', () => {
    const { unmount } = renderHook(() => useDocumentTitle('Test Title'));
    
    expect(document.title).toBe('Test Title');
    
    unmount();
    
    expect(document.title).toBe(originalTitle);
  });
});

Console Output

❯✓ useDocumentTitle Hook - Side Effects › sets document title on mount (9ms)

❯✓ useDocumentTitle Hook - Side Effects › updates document title when it changes (11ms)

❯✓ useDocumentTitle Hook - Side Effects › restores original title on unmount (8ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Side effects tested successfully!

Test 4: Async Hooks

Test hooks with async operations

Testing Async Hooks

javascript

Handle async operations with waitFor

import { renderHook, waitFor } from '@testing-library/react';
import { useFetch } from './useFetch';

// Mock fetch API
global.fetch = jest.fn();

describe('useFetch Hook - Async', () => {
  beforeEach(() => {
    fetch.mockClear();
  });

  test('starts with loading state', () => {
    fetch.mockResolvedValue({
      json: async () => ({ data: 'test' })
    });
    
    const { result } = renderHook(() => useFetch('/api/data'));
    
    expect(result.current.loading).toBe(true);
    expect(result.current.data).toBe(null);
  });

  test('fetches and returns data', async () => {
    const mockData = { id: 1, name: 'Test' };
    fetch.mockResolvedValue({
      json: async () => mockData
    });
    
    const { result } = renderHook(() => useFetch('/api/users/1'));
    
    expect(result.current.loading).toBe(true);
    
    // Wait for async operation to complete
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
    });
    
    expect(result.current.data).toEqual(mockData);
    expect(result.current.error).toBe(null);
  });

  test('handles fetch errors', async () => {
    const errorMessage = 'Network error';
    fetch.mockRejectedValue(new Error(errorMessage));
    
    const { result } = renderHook(() => useFetch('/api/data'));
    
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
    });
    
    expect(result.current.error).toBe(errorMessage);
    expect(result.current.data).toBe(null);
  });
});

Console Output

❯✓ useFetch Hook - Async › starts with loading state (7ms)

❯✓ useFetch Hook - Async › fetches and returns data (45ms)

❯✓ useFetch Hook - Async › handles fetch errors (38ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Async hooks tested!

Common Hook Testing Patterns

Best practices for different scenarios

act() Wrapper

State Updates

Wrap state-changing functions in act()

act(() => {)

result.current.increment();

});

rerender()

Prop Changes

Use rerender() to update hook props

const { rerender } = renderHook(...);

rerender({ userId: 2 });

waitFor()

Async Operations

Wait for async updates with waitFor()

await waitFor(() => {)

expect(result.current.data)

.toBeDefined();

});

unmount()

Cleanup Testing

Test cleanup with unmount()

const { unmount } = renderHook(...);

unmount();

// Test cleanup happened

Hook Testing Best Practices

Test Hooks in Isolation

Use renderHook() to test hooks without components. This makes tests faster and more focused on the hook's logic.

Always Use result.current

Access hook values through result.current. This ensures you read the latest state after updates. Don't destructure directly!

Wrap State Changes in act()

Wrap all state-changing function calls in act(). This ensures React processes all updates before assertions.

Test Cleanup

If your hook has side effects, test that cleanup happens properly using unmount().

Key Takeaways

renderHook()

Test hooks in isolation without creating components. Returns result object.

result.current

Always access hook values through result.current for latest state.

act() Wrapper

Wrap state-changing calls in act() to ensure all updates are processed.

rerender()

Update hook props/arguments by calling rerender with new values.

waitFor()

Handle async operations by waiting for conditions to be met.

Test Cleanup

Use unmount() to test side effect cleanup and memory leaks.

Master Hook Testing!

You now know how to test custom hooks in isolation! Next topics:

Async Testing - Handle loading states and API calls in tests
Mocking & Stubbing - Isolate code with mocks and test doubles

Previous Topic

Component Testing

Test component rendering, props, state, events, and user interactions with React Testing Library.

Next Topic

Async Testing

Test async operations, API calls, timers, and promises with waitFor and findBy queries.

Ask a Question

Have a question about Hook Testing? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Testing

Hook Testing

Learn how to test custom React hooks in isolation using renderHook from React Testing Library. Master testing hook state, side effects, and complex hook logic.

Find videos you like?

Save to resource drawer for future reference!

Why Test Hooks?

Custom hooks need isolated testing

Custom hooks contain reusable logic that you want to test independently from components. Testing hooks in isolation ensures your logic works correctly before using it across your app.

React Testing Library provides renderHook() specifically for testing hooks without needing a full component!

Isolated Testing

Test hook logic independently without rendering components.

Faster Tests

No DOM rendering needed, hooks tests run lightning fast.

Reusable Logic

Ensure your shared hook logic works before using it everywhere.

Try a Custom useCounter Hook

See a custom hook in action! This useCounter hook provides state and functions. We'll learn to test it in isolation.

Custom Hook

State Management

Function Returns

Hook Preview

See useCounter hook in action

useCounter Hook Demo

Frontend

<div id="root"></div>

Live Preview

Loading preview...

The renderHook Function

Your tool for testing hooks

The renderHook() function from React Testing Library lets you test hooks without creating a component. It returns the hook's result and helper functions.

Basic Structure

1. Call renderHook

const { result } = renderHook(() => useCounter())

2. Access Current Value

result.current.count // Get hook's return value

3. Call Hook Functions

act(() => result.current.increment())

4. Assert New Value

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

Important: Use result.current

Always access hook values through result.current. This ensures you're reading the most up-to-date value after state changes!

Test 1: Basic Hook Testing

Test initial state and simple updates

Testing useCounter Hook

javascript

Test hook initialization and state updates

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

describe('useCounter Hook', () => {
  test('initializes with default value of 0', () => {
    const { result } = renderHook(() => useCounter());
    
    expect(result.current.count).toBe(0);
  });

  test('initializes with custom value', () => {
    const { result } = renderHook(() => useCounter(10));
    
    expect(result.current.count).toBe(10);
  });

  test('increments count', () => {
    const { result } = renderHook(() => useCounter());
    
    act(() => {
      result.current.increment();
    });
    
    expect(result.current.count).toBe(1);
  });

  test('decrements count', () => {
    const { result } = renderHook(() => useCounter(5));
    
    act(() => {
      result.current.decrement();
    });
    
    expect(result.current.count).toBe(4);
  });

  test('resets to initial value', () => {
    const { result } = renderHook(() => useCounter(10));
    
    act(() => {
      result.current.increment();
      result.current.increment();
    });
    expect(result.current.count).toBe(12);
    
    act(() => {
      result.current.reset();
    });
    
    expect(result.current.count).toBe(10);
  });
});

Console Output

❯✓ useCounter Hook › initializes with default value of 0 (8ms)

❯✓ useCounter Hook › initializes with custom value (6ms)

❯✓ useCounter Hook › increments count (9ms)

❯✓ useCounter Hook › decrements count (7ms)

❯✓ useCounter Hook › resets to initial value (11ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 5 passed, 5 total

// ✅ All hook tests passed!

Test 2: Updating Hook Props

Test hooks when props change

Testing Hook Prop Changes with rerender

javascript

Use rerender to update hook arguments

import { renderHook } from '@testing-library/react';
import { useUserData } from './useUserData';

describe('useUserData Hook - Props', () => {
  test('returns data for initial user ID', () => {
    const { result } = renderHook(
      ({ userId }) => useUserData(userId),
      { initialProps: { userId: 1 } }
    );
    
    expect(result.current.userId).toBe(1);
  });

  test('updates when user ID changes', () => {
    const { result, rerender } = renderHook(
      ({ userId }) => useUserData(userId),
      { initialProps: { userId: 1 } }
    );
    
    expect(result.current.userId).toBe(1);
    
    // Rerender with new props
    rerender({ userId: 2 });
    
    expect(result.current.userId).toBe(2);
  });

  test('handles multiple prop updates', () => {
    const { result, rerender } = renderHook(
      ({ userId }) => useUserData(userId),
      { initialProps: { userId: 1 } }
    );
    
    expect(result.current.userId).toBe(1);
    
    rerender({ userId: 2 });
    expect(result.current.userId).toBe(2);
    
    rerender({ userId: 3 });
    expect(result.current.userId).toBe(3);
  });
});

Console Output

❯✓ useUserData Hook - Props › returns data for initial user ID (10ms)

❯✓ useUserData Hook - Props › updates when user ID changes (12ms)

❯✓ useUserData Hook - Props › handles multiple prop updates (14ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Hook props testing works!

Test 3: Hooks with useEffect

Test hooks that perform side effects

Testing Side Effects

javascript

Test hooks that use useEffect or call APIs

import { renderHook, waitFor } from '@testing-library/react';
import { useDocumentTitle } from './useDocumentTitle';

describe('useDocumentTitle Hook - Side Effects', () => {
  // Store original title
  const originalTitle = document.title;
  
  afterEach(() => {
    // Restore original title after each test
    document.title = originalTitle;
  });

  test('sets document title on mount', () => {
    renderHook(() => useDocumentTitle('New Title'));
    
    expect(document.title).toBe('New Title');
  });

  test('updates document title when it changes', () => {
    const { rerender } = renderHook(
      ({ title }) => useDocumentTitle(title),
      { initialProps: { title: 'First Title' } }
    );
    
    expect(document.title).toBe('First Title');
    
    rerender({ title: 'Second Title' });
    
    expect(document.title).toBe('Second Title');
  });

  test('restores original title on unmount', () => {
    const { unmount } = renderHook(() => useDocumentTitle('Test Title'));
    
    expect(document.title).toBe('Test Title');
    
    unmount();
    
    expect(document.title).toBe(originalTitle);
  });
});

Console Output

❯✓ useDocumentTitle Hook - Side Effects › sets document title on mount (9ms)

❯✓ useDocumentTitle Hook - Side Effects › updates document title when it changes (11ms)

❯✓ useDocumentTitle Hook - Side Effects › restores original title on unmount (8ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Side effects tested successfully!

Test 4: Async Hooks

Test hooks with async operations

Testing Async Hooks

javascript

Handle async operations with waitFor

import { renderHook, waitFor } from '@testing-library/react';
import { useFetch } from './useFetch';

// Mock fetch API
global.fetch = jest.fn();

describe('useFetch Hook - Async', () => {
  beforeEach(() => {
    fetch.mockClear();
  });

  test('starts with loading state', () => {
    fetch.mockResolvedValue({
      json: async () => ({ data: 'test' })
    });
    
    const { result } = renderHook(() => useFetch('/api/data'));
    
    expect(result.current.loading).toBe(true);
    expect(result.current.data).toBe(null);
  });

  test('fetches and returns data', async () => {
    const mockData = { id: 1, name: 'Test' };
    fetch.mockResolvedValue({
      json: async () => mockData
    });
    
    const { result } = renderHook(() => useFetch('/api/users/1'));
    
    expect(result.current.loading).toBe(true);
    
    // Wait for async operation to complete
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
    });
    
    expect(result.current.data).toEqual(mockData);
    expect(result.current.error).toBe(null);
  });

  test('handles fetch errors', async () => {
    const errorMessage = 'Network error';
    fetch.mockRejectedValue(new Error(errorMessage));
    
    const { result } = renderHook(() => useFetch('/api/data'));
    
    await waitFor(() => {
      expect(result.current.loading).toBe(false);
    });
    
    expect(result.current.error).toBe(errorMessage);
    expect(result.current.data).toBe(null);
  });
});

Console Output

❯✓ useFetch Hook - Async › starts with loading state (7ms)

❯✓ useFetch Hook - Async › fetches and returns data (45ms)

❯✓ useFetch Hook - Async › handles fetch errors (38ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Async hooks tested!

Common Hook Testing Patterns

Best practices for different scenarios

act() Wrapper

State Updates

Wrap state-changing functions in act()

act(() => {)

result.current.increment();

});

rerender()

Prop Changes

Use rerender() to update hook props

const { rerender } = renderHook(...);

rerender({ userId: 2 });

waitFor()

Async Operations

Wait for async updates with waitFor()

await waitFor(() => {)

expect(result.current.data)

.toBeDefined();

});

unmount()

Cleanup Testing

Test cleanup with unmount()

const { unmount } = renderHook(...);

unmount();

// Test cleanup happened

Hook Testing Best Practices

Test Hooks in Isolation

Use renderHook() to test hooks without components. This makes tests faster and more focused on the hook's logic.

Always Use result.current

Access hook values through result.current. This ensures you read the latest state after updates. Don't destructure directly!

Wrap State Changes in act()

Wrap all state-changing function calls in act(). This ensures React processes all updates before assertions.

Test Cleanup

If your hook has side effects, test that cleanup happens properly using unmount().

Key Takeaways

renderHook()

Test hooks in isolation without creating components. Returns result object.

result.current

Always access hook values through result.current for latest state.

act() Wrapper

Wrap state-changing calls in act() to ensure all updates are processed.

rerender()

Update hook props/arguments by calling rerender with new values.

waitFor()

Handle async operations by waiting for conditions to be met.

Test Cleanup

Use unmount() to test side effect cleanup and memory leaks.

Master Hook Testing!

You now know how to test custom hooks in isolation! Next topics:

Async Testing - Handle loading states and API calls in tests
Mocking & Stubbing - Isolate code with mocks and test doubles

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Component Testing

Async Testing

Building Your Learning Module...

Hook Testing

Isolated Testing

Faster Tests

Reusable Logic

Try a Custom useCounter Hook

useCounter Hook Demo

Basic Structure

Important: Use result.current

State Updates

Prop Changes

Async Operations

Cleanup Testing

Test Hooks in Isolation

Always Use result.current

Wrap State Changes in act()

Test Cleanup

renderHook()

result.current

act() Wrapper

rerender()

waitFor()

Test Cleanup

Master Hook Testing!

Component Testing

Async Testing

Hook Testing

Isolated Testing

Faster Tests

Reusable Logic

Try a Custom useCounter Hook

useCounter Hook Demo

Basic Structure

Important: Use result.current

State Updates

Prop Changes

Async Operations

Cleanup Testing

Test Hooks in Isolation

Always Use result.current

Wrap State Changes in act()

Test Cleanup

renderHook()

result.current

act() Wrapper

rerender()

waitFor()

Test Cleanup

Master Hook Testing!