В чём идея Testing Library и почему тесты ищут элементы по роли?

Testing Library предлагает тестировать компонент так, как с ним работает пользователь: смотреть на видимый результат, а не на внутреннее состояние и реализацию.

Принципы

• Находить элементы через то, что видит пользователь: роль, подпись, текст.
• Не проверять state, имена методов и внутренние классы.
• Взаимодействовать через userEvent: клик, ввод, tab.

Приоритет запросов

1. getByRole('button', { name: 'Сохранить' }) — лучший вариант, заодно проверяет доступность.
2. getByLabelText — для полей форм.
3. getByText, getByPlaceholderText.
4. getByTestId — запасной вариант, когда ничего другого нет.

render(<LoginForm onSubmit={onSubmit} />);

await userEvent.type(screen.getByLabelText('Email'), 'a@b.co');
await userEvent.click(screen.getByRole('button', { name: 'Войти' }));

expect(onSubmit).toHaveBeenCalledWith({ email: 'a@b.co' });

Преимущество

Тест переживает рефакторинг: можно поменять разметку и хуки, пока поведение то же.

Коротко для собеседования

Тестируем поведение глазами пользователя. Запросы по роли и подписи надёжнее и бонусом проверяют доступность.