React Testing Library і async UI

Query priority

1. getByRole/findByRole з accessible name.
2. getByLabelText для controls.
3. Visible text для user-facing result.
4. queryBy* для absence.
5. data-testid лише documented escape hatch.

Якщо semantic query не знаходить кнопку або input, спершу перевірте markup/accessibility. Не тестуйте internal state, Hook call count, CSS class або private child лише тому, що це простіше.

Async і boundary control

await user.type(screen.getByRole('textbox', { name: /назва/i }), 'react'); await user.click(screen.getByRole('button', { name: /застосувати/i }));

user-event моделює повну interaction. findBy*/waitFor очікують loading→result; arbitrary sleep створює flakiness. Контролюйте fetch response, але залишайте validator, state transitions і DOM real. Окремо перевірте HTTP error/retry, valid empty, filtered empty та success.

Практика

Запустіть 7 lab tests, прочитайте failure output semantic query та звірте case/mock/query/async registers.

Офіційні джерела

• React Testing Library
• About Queries
• user-event
• Async Methods