Стоимость Testing Library: пошаговая инструкция по внедрению за 1 час для React-проекта

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

Шаг 1: Установка необходимых пакетов (5 минут). Откройте терминал в корне вашего проекта на React. Если вы используете Create React App, часть пакетов уже установлена. Для чистого проекта выполните команду: npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event jest jest-environment-jsdom. Если проект на TypeScript, добавьте также @types/jest и @testing-library/react. Это базовый набор: сама библиотека, матчеры для Jest, симулятор пользовательских событий, сам Jest и его окружение для DOM.

Шаг 2: Настройка Jest (10 минут). В корне проекта создайте или отредактируйте файл `jest.config.js`. Минимальная конфигурация может выглядеть так: module.exports = { testEnvironment: 'jsdom', setupFilesAfterEnv: ['/jest.setup.js'], }. Ключевой момент — `testEnvironment: 'jsdom'`, так как мы тестируем компоненты, работающие с DOM. Далее создайте файл `jest.setup.js`. В него импортируйте расширенные матчеры: import '@testing-library/jest-dom'. Это добавит в Jest удобные методы вроде `.toBeInTheDocument()`, `.toBeDisabled()` и другие.

Шаг 3: Написание первого простого теста (15 минут). Создайте файл рядом с вашим компонентом, например, `Button.test.jsx`. Импортируйте необходимые утилиты: import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event';. Напишите простой компонент или импортируйте существующий. Первый тест должен проверить рендеринг: test('renders button with text', () => { render(Click me); const buttonElement = screen.getByText(/click me/i); expect(buttonElement).toBeInTheDocument(); }). Запустите тест командой `npm test -- Button.test.jsx`. Увидев зеленый результат, вы подтвердите, что среда работает.

Шаг 4: Тестирование пользовательских событий (15 минут). Сила Testing Library — в симуляции реальных действий. Протестируем клик. test('calls onClick handler when clicked', async () => { const handleClick = jest.fn(); const user = userEvent.setup(); render(Click); const button = screen.getByRole('button', { name: /click/i }); await user.click(button); expect(handleClick).toHaveBeenCalledTimes(1); }). Обратите внимание: мы используем `getByRole` — это предпочтительный запрос, так как он соответствует тому, как приложение используют люди и вспомогательные технологии. `userEvent` асинхронный, поэтому нужен `async/await`.

Шаг 5: Тестирование компонента с состоянием (State) или контекстом (Context) (10 минут). Для тестирования компонентов, использующих useState, useContext или хуки от стейт-менеджеров, не требуется дополнительных ухищрений. Просто рендерите их как есть. Например, компонент-счетчик: test('increments counter on button click', async () => { const user = userEvent.setup(); render(); const counter = screen.getByText(/0/); const incrementButton = screen.getByRole('button', { name: /increment/i }); await user.click(incrementButton); expect(counter).toHaveTextContent('1'); }). Testing Library автоматически рендерит компонент в изолированном DOM, и все хуки работают.

Шаг 6: Тестирование асинхронного поведения (Мокирование fetch) (15 минут). Часто компоненты загружают данные. Для их тестирования нужно замокать HTTP-запросы. Установите `jest-fetch-mock` или используйте встроенные возможности Jest. В `jest.setup.js` добавьте: global.fetch = jest.fn();. В тесте: test('displays user data after fetch', async () => { const fakeUser = { name: 'John Doe' }; fetch.mockResolvedValueOnce({ ok: true, json: async () => fakeUser, }); render(); expect(await screen.findByText(/John Doe/)).toBeInTheDocument(); expect(fetch).toHaveBeenCalledWith('https://api.example.com/user/1'); }). Здесь ключевой запрос — `findByText`, который ждет появления элемента (async/await встроен в сам матчер).

Шаг 7: Запуск всех тестов и интеграция (5 минут). Запустите `npm test` без аргументов, чтобы выполнить все тесты в проекте. Jest будет искать файлы с суффиксами `.test.js` или `.spec.js`. Вы можете добавить эту команду в раздел `scripts` вашего `package.json`: "test": "jest", "test:watch": "jest --watch". Готово! Вы только что за час настроили среду тестирования, основанную на лучших практиках, и написали несколько ключевых типов тестов. Дальнейшие шаги — увеличение покрытия, тестирование более сложных сценариев (например, с React Router) и интеграция в процесс CI/CD.