foundation
Accessibility-oriented queries
Use role, name, label, and text queries to align tests with how users and assistive tech find UI.
Query priority in Testing Library: `getByRole`, `getByLabelText`, `getByPlaceholderText`, then text; `getByTestId` is a last resort. Roles reflect how assistive tech exposes controls — button, textbox, combobox.
Name options disambiguate multiple elements: `getByRole('button', { name: /save/i })`. Hidden elements are skipped by default. Fixing tests often means improving markup — add labels, roles, and accessible names in the product.
On interviews, explain the concept with a concrete example and name the behavior interviewers probe.
Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.
The trade-off is often clarity versus reuse or explicit props versus convenience.
Checklist:
- Prefer role and accessible name.
- Add labels instead of test ids when possible.
- Align queries with WCAG-exposed semantics.