Які типи селекторів надає RTL?
React Testing Library надає кілька груп селекторів. Їхня філософія - шукати елементи так, як це зробив би користувач, а не за технічними деталями.
1) За доступністю (головні та рекомендовані)
Ці селектори імітують поведінку користувачів зі скрінрідерами і вважаються найправильнішими.
| Метод | Що шукає |
|---|---|
getByRole | за роллю елемента, кнопка, посилання, заголовок тощо |
getByLabelText | за текстом label у формах |
getByPlaceholderText | за placeholder |
getByText | за видимим текстом |
getByDisplayValue | за значенням поля вводу |
Приклад:
js
getByRole("button", { name: /send/i });2) За alt-текстом і title
Корисно для зображень та іконок.
| Метод | Що шукає |
|---|---|
getByAltText | за alt у зображення |
getByTitle | за атрибутом title |
3) За test-id (на крайній випадок)
Використовується, лише якщо інших варіантів немає.
| Метод | Що шукає |
|---|---|
getByTestId | за data-testid="…" |
RTL вважає це крайнім заходом, тому що такі тести ближчі до реалізації, а не до поведінки.
4) Async і множинні версії тих самих методів
У всіх селекторів є варіанти:
| Префікс | Що означає |
|---|---|
getBy… | знайти елемент, якщо немає, одразу помилка |
queryBy… | знайти елемент, якщо немає, повернути null |
findBy… | асинхронний пошук (очікування появи, Promises) |
getAllBy… | очікує кілька елементів |
queryAllBy… | не кидає помилку за відсутності |
Головна думка
RTL просуває селектори в такому пріоритетному порядку:
- Role / Text / Label, як користувач
- Alt / Title / Placeholder, близько до реальності
- Test ID, лише якщо інакше не можна
Якщо знадобиться, можу навести приклади тестів із кожним типом селектора.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.