test/query-by-role

Dlaczego

A test that clicks getByRole('button', { name: 'Save' }) fails when the button loses its name or role, so it guards accessibility for free and survives markup refactors. A test that clicks .btn-primary or [data-testid=save] passes for a div that no keyboard or screen reader user can use.

Poprawka

Query in this order: getByRole (with name), getByLabel, getByPlaceholder, getByText, getByDisplayValue, getByAltText, getByTitle, then getByTestId. Do not reach into the DOM with container.querySelector. Drive interactions with @testing-library/user-event (userEvent.setup() in each test) rather than fireEvent.

Przykłady

// bad
await user.click(container.querySelector('.btn-primary'))
// good
await user.click(screen.getByRole('button', { name: 'Save' }))

Źródła

• Testing Library, About Queries (priority)
• Playwright, Locators

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain test/query-by-role