Integration Testing

Integration testing verifies that multiple pieces work together. In React, an integration test might render a page with routing, Redux, form validation, and a mocked API, then perform a realistic user workflow from start to finish.

Unit vs component vs integration

Realistic integration example

Consider a checkout screen. The test can render the router, Redux provider, checkout component, and API mock. The user enters an address, selects payment, clicks checkout, and sees the confirmation.

flowchart TD
A[Render application] --> B[Load cart]
B --> C[Enter shipping details]
C --> D[Select payment]
D --> E[Click checkout]
E --> F[Mock API]
F --> G[Success response]
G --> H[Order confirmation]

Test setup

render(
  <Provider store={store}>
    <MemoryRouter initialEntries={["/checkout"]}>
      <App />
    </MemoryRouter>
  </Provider>
);

Complete workflow

const user = userEvent.setup();

expect(
  await screen.findByText("Checkout")
).toBeInTheDocument();

await user.type(
  screen.getByLabelText(/address/i),
  "Bangalore"
);

await user.click(
  screen.getByRole("button", { name: /place order/i })
);

expect(
  await screen.findByText(/order confirmed/i)
).toBeInTheDocument();

Why integration tests are valuable

Many bugs occur at boundaries: a form field may produce a value that Redux expects differently, a route may not provide the parameter a page needs, or an API response may not match the component's assumption. Integration tests exercise those boundaries.

What to mock

Mock external systems that make tests unreliable or slow, such as payment gateways, remote APIs, analytics systems, and third-party services. Keep the application's own components and state flow real where possible.

Output

PASS Checkout.integration.test.jsx

✓ loads cart
✓ validates shipping address
✓ submits order
✓ displays order confirmation

4 assertions passed

Common mistakes

• Testing every component only in isolation.
• Mocking the Redux store so heavily that the real state flow is never exercised.
• Calling production APIs from integration tests.
• Making tests depend on timing rather than observable UI state.

Interview questions

• What is integration testing?
• Why are integration tests useful in React?
• What should be mocked?
• How would you test a Redux plus Router feature?