getByRole и его важность в accessibility-driven тестировании

getByRole — один из ключевых методов в React Testing Library, который ориентирован на доступность интерфейсов. Этот метод позволяет находить элементы по их ролям, определяемым стандартами ARIA и HTML, что делает тесты ближе к пользовательскому опыту, особенно для людей с ограниченными возможностями. Использование getByRole способствует accessibility-driven подходу к тестированию, обеспечивая более надёжное и предсказуемое поведение приложений.

Основные принципы работы getByRole

Метод getByRole ищет элемент по его ARIA-ролям или встроенным ролям HTML-элементов. Например:

const button = screen.getByRole('button');
const heading = screen.getByRole('heading', { level: 1 });

Ключевые моменты:

Роль элемента определяется HTML-тегом или атрибутом role.
Фильтры по имени (name) позволяют уточнять поиск, используя видимый текст или accessible name:

const submitButton = screen.getByRole('button', { name: /отправить/i });

getByRole гарантирует, что найден один уникальный элемент. Если элементов несколько, выбрасывается ошибка, что помогает обнаруживать неожиданные дубликаты.

Преимущества использования getByRole

Повышенная устойчивость тестов В отличие от getByTestId или селекторов классов, поиск по роли не зависит от структуры DOM или названия классов, которые могут меняться при рефакторинге.
Поддержка доступности (a11y) Использование ролей проверяет соответствие элементов стандартам ARIA. Если элемент не имеет роли или неправильного aria-label, тест не сможет его найти, что выявляет потенциальные ошибки в доступности.
Человекоориентированное тестирование Роль и accessible name соответствуют тому, как элемент воспринимается пользователями с экранными читалками. Это делает тесты более реалистичными и близкими к реальному взаимодействию.

Уточнение поиска через опции

Метод getByRole поддерживает несколько полезных опций:

name — ищет элемент по видимому тексту или aria-label:

screen.getByRole('textbox', { name: 'Email' });

hidden — позволяет включать скрытые элементы (по умолчанию скрытые элементы игнорируются):

screen.getByRole('button', { name: 'Скрытая кнопка', hidden: true });

level — используется для заголовков (heading) для поиска по уровню (h1, h2, …):

screen.getByRole('heading', { level: 2 });

Отличие getByRole от других селекторов

getByTestId: полагается на специальные атрибуты data-testid. Подходит для внутренних структур, но не отражает доступность. Тесты могут пройти, даже если пользователь не сможет найти элемент через экранный читалку.
getByText: ищет элементы по текстовому содержимому. Хорошо для интерактивных элементов, но менее строг по отношению к доступности и может возвращать неожиданные элементы с похожим текстом.
querySelector / querySelectorAll: слишком низкоуровневый подход, тест становится хрупким при изменениях стилей и структуры DOM.

Использование getByRole обеспечивает долговечность тестов и тесно интегрируется с принципами доступности.

Примеры практического применения

Проверка кнопки отправки формы

test('форма содержит кнопку отправки', () => {
  render(<Form />);
  const submitButton = screen.getByRole('button', { name: /отправить/i });
  expect(submitButton).toBeInTheDocument();
});

Проверка заголовков страницы

test('страница содержит главный заголовок', () => {
  render(<Page />);
  const mainHeading = screen.getByRole('heading', { level: 1, name: /главная/i });
  expect(mainHeading).toBeVisible();
});

Работа с интерактивными элементами

test('чекбокс отмечается при клике', async () => {
  render(<Settings />);
  const checkbox = screen.getByRole('checkbox', { name: /включить уведомления/i });
  await userEvent.click(checkbox);
  expect(checkbox).toBeChecked();
});