getByTestId: правильное использование data-testid

В React Testing Library (RTL) подход к тестированию ориентирован на поведение пользователя, а не на реализацию компонентов. Однако иногда необходим прямой доступ к элементу, который сложно выбрать с помощью текста, роли или других стандартных селекторов. Для таких случаев предназначен атрибут data-testid и функция getByTestId.

Атрибут data-testid

data-testid — это специальный атрибут, который добавляется к HTML-элементам исключительно для целей тестирования:

<button data-testid="submit-button">Отправить</button>

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

  • Не влияет на работу приложения.
  • Не виден пользователю.
  • Должен использоваться только когда нет возможности выбрать элемент по роли, тексту или другим семантическим признакам.
  • Значение data-testid должно быть уникальным в пределах компонента или рендера, чтобы избежать ошибок при выборке.

getByTestId и его поведение

getByTestId — синхронный селектор, возвращает один элемент по указанному data-testid. Если элемент не найден, выбрасывает ошибку.

Пример использования:

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('кнопка отправки присутствует', () => {
  render(<MyComponent />);
  const button = screen.getByTestId('submit-button');
  expect(button).toBeInTheDocument();
});

Особенности:

  • Используется в случаях, когда элемент не имеет уникальной роли или текста.
  • Подходит для проверки наличия элемента, атрибутов или классов.
  • Не подходит для тестов, ориентированных на действия пользователя, таких как клики и ввод текста — в таких случаях лучше getByRole, getByText, getByLabelText.

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

Селектор Когда использовать Примечания
getByText Если элемент содержит уникальный текст Наиболее семантичный подход
getByRole Если элемент имеет роль ARIA (button, checkbox) Предпочтительный способ для интерактивных элементов
getByLabelText Для элементов формы с меткой Позволяет выбирать по лейблу формы
getByTestId Когда нет роли, текста или лейбла Использовать как последнее средство

Практика использования data-testid

1. Тестирование наличия элемента:

<div data-testid="notification">Сообщение успешно отправлено</div>
const notification = screen.getByTestId('notification');
expect(notification).toBeInTheDocument();

2. Проверка атрибутов и классов:

<button data-testid="submit-button" disabled>Отправить</button>
const button = screen.getByTestId('submit-button');
expect(button).toBeDisabled();
expect(button).toHaveClass('submit-btn');

3. Комбинация с событиями:

<button data-testid="increment-button" onCl ick={increment}>+</button>
import userEvent from '@testing-library/user-event';

const button = screen.getByTestId('increment-button');
userEvent.click(button);
expect(screen.getByTestId('counter')).toHaveTextContent('1');

Правильные практики при использовании getByTestId

  1. Не злоупотреблять data-testid Использовать только тогда, когда стандартные методы выбора невозможны.

  2. Выбирать уникальные идентификаторы Не повторять значения data-testid на одном уровне DOM, чтобы избежать случайного выбора неправильного элемента.

  3. Следовать смысловой нагрузке Название должно отражать роль элемента в компоненте (submit-button, notification-message), а не его вид (red-button, big-div).

  4. Совмещать с семантическими селекторами Даже при наличии data-testid лучше использовать семантические селекторы (getByRole, getByText) для тестов, ориентированных на поведение пользователя.

  5. Использовать queryByTestId для проверок отсутствия Если нужно убедиться, что элемент не отображается:

expect(screen.queryByTestId('error-message')).not.toBeInTheDocument();
  1. Избегать прямого доступа к DOM через container или document.querySelector React Testing Library ориентирована на тестирование компонентов через поведение пользователя, поэтому getByTestId обеспечивает безопасный доступ к нужному элементу без обхода RTL.

Итоговое понимание

getByTestId и data-testid — это инструмент последнего выбора для тестирования компонентов. Он позволяет гарантированно выбрать элемент, когда другие семантические методы невозможны, но не заменяет подход, ориентированный на пользователя. Корректное использование обеспечивает:

  • стабильность тестов;
  • ясность намерений теста;
  • минимизацию зависимости от структуры DOM и классов.
Оглавление