Frontend Academy · Урок

@testing-library/react: render и userEvent

Рендерьте компоненты в смоделированном DOM, находите элементы по роли и тексту метки, имитируйте действия пользователя с помощью userEvent и проверяйте видимый результат.

«@testing-library/react: render и userEvent» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Философия Testing Library

@testing-library рекомендует писать тесты, похожие на то, как пользователи взаимодействуют с интерфейсом. Выполняйте поиск по роли, метке и тексту, а не по деталям реализации, таким как имена классов CSS или внутреннее устройство компонента.

Установка Testing Library

Установите Testing Library для React и пакет userEvent для имитации взаимодействий пользователя.

npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

Монтирование компонента

render(<Component />) монтирует компонент в моделируемом DOM. Функция возвращает функции запросов для поиска элементов.

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

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Поиск элементов

Предпочитайте запросы в следующем порядке: getByRole (доступный), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Используйте queryBy* при проверке отсутствия элемента. Для асинхронных элементов используйте findBy*.

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent — имитация действий пользователя

userEvent имитирует реальные взаимодействия пользователя: ввод текста, нажатия и навигацию с клавиатуры. Это реалистичнее, чем более старый fireEvent.

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

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

Заполните поля формы и отправьте её. Проверьте результат — то, что пользователь видит после отправки.

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

Специальные сопоставители jest-dom

@testing-library/jest-dom добавляет полезные сопоставители: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), toHaveFocus().

Тестирование асинхронных обновлений компонента

Используйте waitFor() или findBy* для элементов, которые появляются асинхронно (после получения данных или задержки).

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Тестирование состояний загрузки и ошибки

Имитируйте ответ fetch, чтобы проверить разные состояния. MSW (Mock Service Worker) — лучший инструмент для имитации ответов API в тестах.

Тестирование доступности

Testing Library естественным образом поощряет доступность: если вы не можете найти элемент по роли или метке, вероятно, он недоступен. Используйте jest-axe для автоматических проверок доступности в тестах.

Не тестируйте детали реализации

Избегайте следующего: поиска по именам классов CSS, импорта внутреннего состояния компонента и проверки вызова конкретных методов. Тестируйте поведение с точки зрения пользователя: что он видит и что происходит при взаимодействии.

Быстрая проверка

Какую функцию запроса Testing Library следует предпочитать для поиска интерактивных элементов?

Итоги: @testing-library/react

render() монтирует компоненты в моделируемом DOM. Выполняйте поиск по роли, метке и тексту, а не по деталям реализации. Используйте userEvent.setup() для реалистичного взаимодействия с пользователем. Для асинхронных элементов применяйте findBy*. Используйте jest-dom для понятных проверок. Тестируйте с точки зрения пользователя: что он видит и делает. Доступные компоненты тестировать проще.

Часто задаваемые вопросы

Урок «@testing-library/react: render и userEvent» бесплатный?

Да — полный текст урока «@testing-library/react: render и userEvent» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «@testing-library/react: render и userEvent»?

Рендерьте компоненты в смоделированном DOM, находите элементы по роли и тексту метки, имитируйте действия пользователя с помощью userEvent и проверяйте видимый результат. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «@testing-library/react: render и userEvent»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Настройка Jest и базовые тесты
@testing-library/react: render и userEvent
@testing-library/vue: монтирование компонентов
Имитация модулей и API-вызовов

← Назад к Frontend Academy