Rendering in tests

Testing Library renders a component into a real DOM and lets you interact with it the way a user would. Tests then check behaviour and output, not implementation details like state variables.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what Testing Library renders and what a test should assert on
Write a test that renders a component and checks what the user sees
Spot a test that asserts on internal state

In practice

A few lines that show Rendering in tests doing its job.

TSX

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

test("increments when clicked", async () => {
  render(<Counter />);
  await userEvent.click(screen.getByRole("button", { name: /0/ }));
  expect(screen.getByRole("button")).toHaveTextContent("1");
});

The common mistake

Watch for

Asserting on internal state or calling component methods. Those tests break on every refactor and pass when the UI is wrong. Assert on what the user sees.

What to know first

Your roadmap puts these before Rendering in tests, unless you already know them.

Function components

How it stays learned

Once a session shows you understand Rendering in tests, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Rendering in tests.

Next in the moduleQuerying by role →