Paths/Frontend Engineer/Testing Frontend Code / Component Tests
Test the Way a User Sees It
Testing library React renders the component and queries it the way a screen reader would. Write the approach your team follows.
Validator
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/tests exists○
- File ~/tests/component.md exists○
- The document states the three steps of a component test○
- The document states why queries use roles○
02Walkthrough
4 steps- 01
Create the tests directory
The testing approach is a document the team agrees on.
mkdir -p ~/tests - 02
Write the three steps
Render the component, interact with it, then assert on what the user can see.
echo '# Component tests\n\n## The three steps\n\n1. render the component with the props it needs\n2. interact with it through a user event - a click, a type, a submit\n3. assert on what is visible afterwards' > ~/tests/component.md - 03
Explain the role query
Querying by role finds the element the way an accessibility tree does, so the test fails when the interface becomes unreachable - not when a class name changes.
echo '\n## Why roles\n\nQuery with queryByRole and the accessible name. It keeps the test honest about accessibility, because an element without a role is an element nobody can reach.' >> ~/tests/component.md - 04
Verify and submit
cat the approach, then submit for validation.
cat ~/tests/component.md
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list