React Testing Library

Learn the basics of writing component tests with RTL.

React Testing Library

React Testing Library (RTL) is a library that tests components the way a user does. You query DOM nodes and make assertions about them; you test the real user experience, not internal implementation.

RTL's core philosophy is test your application the way users use it. That is why it favours accessible queries (getByRole, getByText) over data-testid.

This approach keeps tests stable across refactors: tests look at the user interface, not at internal wiring.

render and screen

render mounts the component into a virtual DOM and returns query helpers. screen provides global queries bound to the document; in most tests you use methods like screen.getByText.

Modern RTL recommends screen because it keeps imports short and lets queries run against the document.

getBy throws if not found; queryBy returns null; findBy awaits async results.

Exercise First RTL test

Write a test that renders the Greeting component with the name="World" prop, finds the text "Hello World" via screen.getByText, and asserts it with expect(...).toBeInTheDocument(). Wrap it in test() or it().

Show example solution

import { render, screen } from "@testing-library/react";
import { Greeting } from "./Greeting";

test("greeting shows text", () => {
  render(<Greeting name="World" />);
  expect(screen.getByText("Hello World")).toBeInTheDocument();
});

Test yourself

What is RTL's core philosophy?
- Verify internal state
- Test like a user
- Mock hooks
- Call class components
Show answer

Test like a user — RTL aims to test as close to the user experience as possible.

Find text with screen

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

render(<Button>Sil</Button>);

const btn = screen.____("Sil");

Show answer

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

render(<Button>Sil</Button>);

const btn = screen.getByText("Sil");

Match query types

render

Mounts to DOM
screen

Global query
getByText

Finds by text
findByText

Awaits async

Next lesson: render and screen

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies