React Testing: What to Test at Component and Integration Level

Testing a React application does not mean asserting every internal state variable or implementation detail. A useful test suite focuses on observable behavior: what users see, what they can do, and how the application responds.

The right testing strategy combines focused unit tests with integration tests that exercise important user flows.

Test behavior rather than implementation

Consider a simple counter:

import { useState } from "react";

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

  return (
    <section>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </section>
  );
}

A useful test verifies that clicking the button changes the displayed count. It should not need to inspect React’s internal state or component implementation.

Using React Testing Library with a compatible test runner, a test might look like this:

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { expect, test } from "vitest";
import Counter from "./Counter";

test("increments the displayed count", async () => {
  const user = userEvent.setup();

  render(<Counter />);

  await user.click(
    screen.getByRole("button", { name: "Increment" })
  );

  expect(screen.getByText("Count: 1")).toBeTruthy();
});

The exact assertion helpers depend on the testing setup. Many projects install @testing-library/jest-dom for more expressive DOM assertions.

Cover component responsibilities

Component tests are useful for verifying:

• Correct rendering of labels and content.
• User interactions and state changes.
• Validation messages.
• Disabled and loading states.
• Conditional rendering.
• Accessibility-related attributes.

Avoid tests that merely repeat the implementation. A test should catch a meaningful regression if the behavior changes incorrectly.

Add integration tests for workflows

A form submission may involve validation, an API request, loading feedback, and a success message. Testing each piece independently does not prove that the whole workflow works.

An integration test can mock the API boundary and exercise the flow from the user’s perspective.

test("shows a success message after saving", async () => {
  const user = userEvent.setup();

  render(<ProfileForm />);

  await user.type(
    screen.getByLabelText("Name"),
    "Alex"
  );

  await user.click(
    screen.getByRole("button", { name: "Save" })
  );

  expect(
    await screen.findByText("Profile saved")
  ).toBeTruthy();
});

This assumes ProfileForm implements the described fields and success message. The test must also arrange for the relevant API request to succeed through the project’s chosen mocking strategy.

Avoid overusing snapshots

Snapshot tests can help detect broad markup changes, but they may also produce noisy failures that require frequent updates. Prefer explicit assertions for critical behavior and reserve snapshots for cases where the rendered structure itself is meaningful.

Test at the right level

A practical strategy includes:

1. Unit tests for pure functions and isolated logic.
2. Component tests for rendering and interaction.
3. Integration tests for workflows across components and services.
4. A smaller set of end-to-end tests for critical application journeys.

Conclusion

The best React test suite is not necessarily the one with the most tests. It is the one that detects meaningful regressions while remaining understandable and maintainable. Prioritize user-visible behavior, important workflows, and risks that could affect real users.