Summary - RTL tests

Test a counter component by pressing the increment button.

Summary - RTL tests

In this group you learned RTL's core tools: render to mount, screen to query, getByRole priority, and userEvent for realistic events.

Remember: tests are written from a user's perspective. Accessible queries first, testId last resort. Use await for async operations.

Now combine what you learned in a small test: render, role query, click, assert.

Exercise Toggle test

The Toggle component switches between "On" and "Off" text when the button is pressed. Write a test: set up a user with userEvent.setup(), render <Toggle />, find the button via screen.getByRole('button'), call await user.click(btn), and assert with expect(screen.getByText(/On/)).toBeInTheDocument(). The test must be async.

Show example solution

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Toggle } from "./Toggle";

test("toggle turns on", async () => {
  const user = userEvent.setup();
  render(<Toggle />);
  const btn = screen.getByRole("button");
  await user.click(btn);
  expect(screen.getByText(/On/)).toBeInTheDocument();
});

Test yourself

What is the accessible query order?
- getByRole first, getByTestId last
- getByText first, getByRole last
- querySelector first, screen last
- getByTestId first, getByRole last
Show answer

getByRole first, getByTestId last — getByRole uses the accessibility tree, so it comes first.

Which keyword for an async test?

test("async", ____ () => {
  await user.click(btn);
});

Show answer

test("async", async () => {
  await user.click(btn);
});

Next lesson: Project: Dashboard

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies