Querying by role

Query elements by their accessible role and name, such as getByRole("button", { name: "Save" }). It finds elements the way assistive technology does, so it also catches missing labels.

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 why querying by role and name matches how assistive technology works
Write queries with getByRole and an accessible name
Spot the getByTestId fallback and find the accessibility fix

In practice

A few lines that show Querying by role doing its job.

TSX

render(<LoginForm />);

const email = screen.getByRole("textbox", { name: "Email" });
const submit = screen.getByRole("button", { name: /sign in/i });
await userEvent.type(email, "ada@example.com");
await userEvent.click(submit);

expect(await screen.findByRole("alert")).toHaveTextContent("Password is required");

The common mistake

Watch for

Falling back to getByTestId or CSS selectors for everything. If an element cannot be found by role and name, it usually has an accessibility problem worth fixing rather than bypassing.

What to know first

Your roadmap puts these before Querying by role, unless you already know them.

Rendering in tests

How it stays learned

Once a session shows you understand Querying by role, 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

Previous in the module← Rendering in tests

Next in the moduleMocking network calls →