Integration testing

Learn to test several components together.

Integration testing

Integration testing runs several components together and verifies real interaction. React Testing Library's render puts a component into the DOM; you query with screen.

Use fireEvent.click to click a button and screen.getByText to find the result. Tests behave like a user: they look at output, not internals.

The file is named Button.test.jsx; the runner finds it automatically.

fireEvent and user interaction

fireEvent simulates DOM events. fireEvent.click(element) mimics a click, fireEvent.change(input, { target: { value: '...' } }) mimics typing.

For more realistic behaviour use @testing-library/user-event; it also handles keyboard and focus details.

Among queries getByRole is the most robust; it finds by accessible role and name.

Exercise Write the Button test

Write the contents of Button.test.jsx. Render <Button label="Save" /> with render, find it with screen.getByText('Save') and assert with expect(...).toBeInTheDocument(). Use test('shows label', () => {}).

Show example solution

import { render, screen } from '@testing-library/react';
import Button from './Button';

test('shows label', () => {
  render(<Button label="Save" />);
  expect(screen.getByText('Save')).toBeInTheDocument();
});

Test yourself

Which is the best query method in integration testing?
- Find visible text with screen.getByText
- Read internal state via componentRef
- Search classes with querySelector
- Print with console.log
Show answer

Find visible text with screen.getByText — You should look at visible text like a user.

Fill in the blank: click a button in a test

import { render, screen, fireEvent } from '@testing-library/react';

fireEvent.____(screen.getByText('Increment'));

Show answer

import { render, screen, fireEvent } from '@testing-library/react';

fireEvent.click(screen.getByText('Increment'));

Match testing concepts

render

Puts into DOM
screen

Runs queries
fireEvent

Simulates events
getByRole

Finds by accessible role

Next lesson: Mock Service Worker

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies