When building React applications, you often create complex user interfaces by combining several smaller components. In these cases, it is important to ensure that not only do individual components work as expected, but also that they interact correctly when used together. Integration testing allows you to verify that a parent component can render its children, manage shared state, and handle user interactions that span across multiple components.

Suppose you have a simple counter application where a parent CounterGroup component renders a CounterDisplay and a CounterControls child component. The parent manages the counter state and passes it down to its children. You want to write an integration test to confirm that when a user clicks the "Increment" button in CounterControls, the CounterDisplay updates accordingly, demonstrating that the components are working together as intended.

Here is how you might approach this test:

CounterGroup.jsx

import { useState } from "react";

function CounterDisplay({ count }) {
  return <div aria-label="count-value">{count}</div>;
}

function CounterControls({ onIncrement, onDecrement }) {
  return (
    <div>
      <button onClick={onIncrement}>Increment</button>
      <button onClick={onDecrement}>Decrement</button>
    </div>
  );
}

export default function CounterGroup() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <CounterDisplay count={count} />
      <CounterControls
        onIncrement={() => setCount(c => c + 1)}
        onDecrement={() => setCount(c => c - 1)}
      />
    </div>
  );
}

CounterGroup.test.jsx

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import CounterGroup from "./CounterGroup";

test("increments and decrements the counter via child components", async () => {
  const user = userEvent.setup();
  render(<CounterGroup />);

  const value = screen.getByLabelText("count-value");
  const incrementBtn = screen.getByRole("button", { name: "Increment" });
  const decrementBtn = screen.getByRole("button", { name: "Decrement" });

  expect(value).toHaveTextContent("0");

  await user.click(incrementBtn);
  expect(value).toHaveTextContent("1");

  await user.click(decrementBtn);
  expect(value).toHaveTextContent("0");
});

This integration test checks that the parent and child components collaborate as expected, covering the flow of data and user events across the component boundary.

Integration tests in React differ from unit tests in both scope and purpose. A unit test focuses on a single component in isolation, verifying its logic and rendering without concern for its children or the broader application. Unit tests are ideal for checking that individual components behave correctly given certain props or state.

In contrast, integration tests are designed to confirm that multiple components work together as expected. These tests ensure that data flows correctly between parent and child components, user interactions in one component cause updates in another, and shared state is managed properly. You should use integration tests when you want to verify that the wiring between components is correct and that the overall user experience is as intended, not just that each piece works on its own.