Установка и конфигурация React Testing Library

Установка зависимостей

Для работы с React Testing Library (RTL) необходимо установить несколько ключевых пакетов. Базовая установка включает саму библиотеку и её вспомогательные модули для интеграции с Jest:

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event jest
  • @testing-library/react — основной пакет для рендеринга React-компонентов и взаимодействия с ними в тестах.
  • @testing-library/jest-dom — расширение Jest, добавляющее удобные матчеры, например, toBeInTheDocument() или toHaveTextContent().
  • @testing-library/user-event — предоставляет высокоуровневые методы для симуляции пользовательских действий, таких как клики, ввод текста, фокус и др.
  • jest — фреймворк для запуска тестов и выполнения утверждений (assertions).

Для проектов на TypeScript рекомендуется также установить типы:

npm install --save-dev @types/jest @types/testing-library__jest-dom

Настройка окружения

RTL рассчитана на работу вместе с Jest, поэтому важно корректно настроить тестовое окружение. В файле package.json необходимо определить скрипт для запуска тестов:

{
  "scripts": {
    "test": "jest"
  }
}

Для корректного использования расширений Jest, таких как jest-dom, создаётся файл настройки, например setupTests.js или setupTests.ts (для TypeScript):

import '@testing-library/jest-dom';

В jest.config.js указывается путь к этому файлу:

module.exports = {
  setupFilesAfterEnv: ['./setupTests.js'],
  testEnvironment: 'jsdom'
};
  • setupFilesAfterEnv — позволяет автоматически подключать расширения и конфигурации перед запуском каждого теста.
  • testEnvironment: 'jsdom' — эмулирует браузерное окружение для корректного рендеринга компонентов React.

Основные принципы конфигурации

  1. Изоляция тестов: каждый тест должен быть независимым. RTL рендерит компоненты в виртуальном DOM, что позволяет тестам не влиять друг на друга.
  2. Чистка после тестов: RTL автоматически очищает DOM после выполнения каждого теста, но для нестандартных сценариев можно использовать cleanup() из @testing-library/react.
  3. Расширяемость: интеграция с user-event позволяет симулировать действия пользователя более реалистично, чем стандартные события fireEvent.

Интеграция с TypeScript

Для TypeScript можно определить глобальные типы для Jest и RTL, чтобы автодополнение работало корректно. В tsconfig.json:

{
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"]
  }
}

Это гарантирует, что методы expect(...).toBeInTheDocument() и другие кастомные матчеры распознаются редактором и компилятором.

Выбор стратегии тестирования

React Testing Library ориентирована на тестирование поведения, а не реализации. Основные принципы:

  • Предпочтение селекторам по роли (getByRole) или тексту (getByText) вместо классов и ID.
  • Использование user-event для симуляции пользовательских действий, что отражает реальное поведение приложения.
  • Минимальное вмешательство в внутренние состояния компонентов; фокус на том, что видит и делает пользователь.

Настройка ESLint и Prettier для тестов

Для поддержания качества кода тестов рекомендуется подключить правила ESLint, специфичные для RTL:

npm install --save-dev eslint-plugin-testing-library eslint-plugin-jest-dom

В .eslintrc.js:

module.exports = {
  plugins: ['testing-library', 'jest-dom'],
  extends: ['plugin:testing-library/react', 'plugin:jest-dom/recommended'],
  env: {
    jest: true
  }
};

Это обеспечивает соблюдение лучших практик, таких как избегание getByTestId без необходимости и использование асинхронных методов корректно.

Проверка установки

После настройки можно проверить работу RTL простым тестом:

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

function Button() {
  return <button>Нажми меня</button>;
}

test('отображает кнопку', () => {
  render(<Button />);
  expect(screen.getByText('Нажми меня')).toBeInTheDocument();
});

Тест должен успешно выполняться, что подтверждает корректность установки и конфигурации.

Итоговые рекомендации по конфигурации

  • Использовать setupTests.js для подключения расширений.
  • Определить Jest как тестовую среду с jsdom.
  • Применять user-event для имитации пользовательских действий.
  • Подключать ESLint и соответствующие плагины для контроля качества тестов.
  • Сосредоточиться на поведении компонентов, а не на их внутренней реализации.

Эта конфигурация создаёт устойчивую и расширяемую среду для написания тестов на React с использованием React Testing Library.

Оглавление