How can you test components that use Hooks?

Testing React Components with Hooks

When testing components that use React Hooks, the goal is to ensure they behave correctly across renders, state changes, and side effects. You can use Jest and React Testing Library (RTL) to write effective tests.

1. Testing Hooks in Components (Using React Testing Library)

For components that use useState, useEffect, or other Hooks, test their behavior, not implementation details.

* Example: Testing `useState` in a Counter Component

import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter"; // Component using useState

test("increments counter on button click", () => {
  render(<Counter />);
  
  const button = screen.getByText("Count: 0");
  fireEvent.click(button);
  
  expect(screen.getByText("Count: 1")).toBeInTheDocument();
});

* Key Points :

Render the component using render().
Simulate user interaction with fireEvent.click().
Assert that the UI updates as expected.

2. Testing `useEffect` Side Effects (API Calls)

For components that fetch data inside useEffect, mock API calls using Jest.

* Example: Testing API Call in `useEffect`

import { render, screen, waitFor } from "@testing-library/react";
import axios from "axios";
import Users from "./Users"; // Fetches users from API
jest.mock("axios");

test("fetches and displays users", async () => {
  axios.get.mockResolvedValue({ data: [{ name: "Alice" }] });

  render(<Users />);
  
  expect(screen.getByText(/Loading/i)).toBeInTheDocument();

  // Wait for async data to load
  await waitFor(() => screen.getByText("Alice"));

  expect(screen.getByText("Alice")).toBeInTheDocument();
});

* Key Points :

Mock API calls with jest.mock().
Use waitFor() to wait for async updates.

3. Testing Custom Hooks

For testing standalone Hooks, use the renderHook utility from @testing-library/react-hooks.

* Example: Testing a Custom `useCounter` Hook

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

test("increments counter", () => {
  const { result } = renderHook(() => useCounter());

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

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

* Key Points :

Use renderHook() to call the Hook.
Use act() to simulate state updates.

Summary :

Hook Used	Testing Approach
`useState`	Simulate user events, check UI updates
`useEffect`	Mock API calls, use `waitFor()`
`useContext`	Wrap component in `context provider`
`useReducer`	Dispatch actions, verify state changes
`useCustomHook`	Use `renderHook()`, trigger updates with `act()`

How can you test components that use Hooks?

Testing React Components with Hooks

1. Testing Hooks in Components (Using React Testing Library)

* Example: Testing useState in a Counter Component

* Key Points :

2. Testing useEffect Side Effects (API Calls)

* Example: Testing API Call in useEffect

* Key Points :

3. Testing Custom Hooks

* Example: Testing a Custom useCounter Hook

* Key Points :

Summary :

* Example: Testing `useState` in a Counter Component

2. Testing `useEffect` Side Effects (API Calls)

* Example: Testing API Call in `useEffect`

* Example: Testing a Custom `useCounter` Hook