One form, every kind of query
Each line shows a query and the tag it found. Note the roles: an email input is a textbox, a select is a combobox, and a form only has the form role when it has a name (here from aria-label).
render() mounts a component into the test page and screen finds elements the way people do: by role and accessible name first, then label, text and the rest, with getBy, queryBy and findBy for present, absent and not-yet-there elements.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write queries for: a search field labelled "Search products", a level-1 heading "Shop", and an image with alt "Cart". Use the best query for each.
A list shows three products, each with an "Add to cart" button. Write a test (live helper style) that clicks the button for "Mango" only.
Explain it without notes
Why does Testing Library recommend getByRole first? What is the full priority?
Explain getBy, queryBy and findBy and when to use each.
What does within do? Give an example where you need it.
A getByRole call fails although you can see the button in the browser. How do you debug it?
Preview
Console
Nothing logged yet.Expected console output
getByRole("heading", { level: 2 }) h2
getByRole("textbox", { name: "Email" }) input
getByRole("combobox", { name: "Plan" }) select
getByRole("checkbox", { name: /news/ }) input
getByRole("button", { name: "Sign up" }) button
getByRole("form", { name: "Sign up" }) form
getByLabelText("Email") input
getByPlaceholderText("you@example.com") input
getByText("Create your account") h2
getByDisplayValue("Free") select
getByAltText("Hectal logo") img
getByTitle("Help") span
getByTestId("hint") span