Тестирование UI: Testing Library

Урок знакомит с подходом Testing Library к тестированию интерфейсов поверх Jest.

Философия Testing Library: тестируйте компонент так, как с ним работает пользователь, а не через детали внутренней разметки.

Где здесь Jest

Testing Library — не замена Jest, а дополнение. Jest остаётся раннером и даёт expect; Testing Library предоставляет инструменты для рендера компонента и поиска элементов «по-человечески». Версии есть для React (@testing-library/react), Vue, Angular и других.

Главная идея: как пользователь

Пользователь не знает про CSS-классы и id. Он видит текст, кнопки, поля с подписями. Поэтому Testing Library ищет элементы по тому, что видно: по тексту, по роли (button, heading), по подписи поля. Тесты, написанные так, не ломаются при смене вёрстки.

Пример теста компонента

Код использует React и Testing Library, исполняется в Node, поэтому показан как иллюстрация:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

test('увеличивает счётчик по клику', async () => {
  render(<Counter />);

  // ищем по тому, что видит пользователь
  expect(screen.getByText('Счёт: 0')).toBeInTheDocument();

  const button = screen.getByRole('button', { name: 'Добавить' });
  await userEvent.click(button);

  expect(screen.getByText('Счёт: 1')).toBeInTheDocument();
});

Запросы по приоритету

Чего избегать

Не ищите элементы по CSS-классу или структуре DOM (div > span:nth-child(2)) — это деталь реализации. Поменяете вёрстку, не меняя поведения, — тест сломается зря. Это та же мысль, что в прошлом уроке: тестируем контракт, а не внутренности.

matchers от jest-dom

Пакет @testing-library/jest-dom добавляет к Jest удобные матчеры для DOM: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveTextContent().

Итог

• Testing Library работает поверх Jest и тестирует UI «как пользователь».
• Элементы ищут по тексту, роли и подписям, а не по классам/структуре.
• Приоритет запросов: getByRole → getByLabelText → getByText → getByTestId.
• jest-dom добавляет матчеры вроде toBeInTheDocument.