Stop 15 · TestingTopics · 7/8

Integration Testing

In short

Each part can work alone and still fail together. Integration tests check that your form, its validation, the API call and the result on screen all cooperate properly.

Testing how multiple units work together — e.g. a form component plus its validation logic plus its submit handler — closer to real usage than isolated unit tests.

The jaadu in cricket pads runs between the wickets with a batting partner.

Think of it like this

Net practice vs a practice match

A batter can look great in the nets and still run his partner out in a match. Integration tests are the practice match: you check the players work together, without waiting for the real World Cup.

Watch it happen

Real component, fake network

Test

ProfileCard

fetch

MSW

render(<ProfileCard />)

1/6The real component mounts, with its real data hook.

The big ideas

What you need to know

Test pieces together

Render a whole feature, like a search box plus results list plus API call, instead of each part alone.

Fake the network, not your code

Tools like Mock Service Worker (MSW) answer fetch requests with fake data, so your real components and hooks still run.

Best value per test

They catch more real bugs than unit tests and run far faster than full browser tests.

See it in code

Walk through the code

tsx

1import { http, HttpResponse } from "msw";2import { setupServer } from "msw/node";3import { render, screen } from "@testing-library/react";4import { ProfileCard } from "./ProfileCard";5 6const server = setupServer(7  http.get("https://api.example.com/me", () => HttpResponse.json({ name: "Priya" })),8);9beforeAll(() => server.listen());10afterEach(() => server.resetHandlers());11afterAll(() => server.close());12 13test("shows the logged-in user's name", async () => {14  render(<ProfileCard />);15  expect(await screen.findByText("Priya")).toBeInTheDocument();16});

1/3setupServer defines a fake reply for GET /me using MSW's http and HttpResponse.

ProfileCard, its data hook and fetch all run for real. Only the network answer is fake. Use full URLs, since Node's fetch can't resolve relative ones.

Save yourself the pain

Common mistakes

Oops

Mocking every child component and hook until nothing real is left.

Do this instead

Mock only the edges, like the network. The point is to test your pieces working together.

Oops

Testing only the success response.

Do this instead

Override a handler with server.use() in one test to return a 500, and check your error message shows.

Your mission

Search, for real

~40 min

Quick check

In an integration test with MSW, what is fake and what is real?

Go deeper

1Write a test covering a form's full fill-in-and-submit flow.
2Test a component together with the context or hook it actually depends on.
3Notice the trade-off: integration tests give more confidence but run slower than unit tests.