Учебник React Testing Library

Введение в тестирование React компонентов
- История и эволюция тестирования UI
- Философия React Testing Library
- Отличие RTL от Enzyme и других инструментов
- Принцип user-centric testing
Основы тестирования и окружение
- Понимание концепции unit-testing
- Integration-testing vs unit-testing в контексте React
- Инструменты тестирования: Jest, Vitest, другие раннеры
- Установка и конфигурация React Testing Library
- Настройка окружения: package.json, jest.config.js, setup файлы
- Конфигурация для TypeScript проектов
- Интеграция с webpack, Vite и другими бандлерами
Сущность React Testing Library
- Что такое RTL и её функциональность
- Difference между логикой тестирования DOM и компонентов
- Queries: основной способ поиска элементов
- Understand screen object и его возможности
- Отличие getBy, queryBy и findBy паттернов
- Асинхронные операции в тестах: waitFor, act
- Best practices при работе с RTL
Queries: Поиск элементов в DOM
- getByRole и его важность в accessibility-driven тестировании
- getByLabelText для работы с формами
- getByPlaceholderText практическое применение
- getByText для поиска текстового контента
- getByDisplayValue для поля с установленным значением
- getByTestId: правильное использование data-testid
- queryBy методы: проверка отсутствия элементов
- findBy методы: асинхронный поиск элементов
- within функция: ограниченный контекст поиска
- screen object как основной API
- Комбинирование queries для сложных сценариев
- Debugging: screen.debug(), screen.logTestingPlaygroundURL()
Events и взаимодействие пользователя
- userEvent против fireEvent: различия и выбор
- Импорт и конфигурация userEvent
- Клики и активация элементов: click, dblClick
- Работа с текстовыми полями: type, clear, selectAll
- Навигация табуляцией: tab взаимодействие
- Выбор из dropdown и select элементов
- Загрузка файлов: upload файлов через input
- Мышь события: hover, unhover, move
- Клавиатурные события: специальные клавиши
- Работа с drag and drop
- Горячие клавиши и combination клавиши
- Асинхронные действия пользователя
- waitFor после взаимодействия элементами
Асинхронное тестирование
- Понимание асинхронности в JavaScript и React
- API запросы в компонентах
- act функция: обёртывание состояния обновлений
- waitFor: ожидание изменений в DOM
- waitForElementToBeRemoved: ожидание удаления элементов
- Работа с таймаутами и setInterval в тестах
- jest.useFakeTimers и управление временем
- jest.runAllTimers, jest.advanceTimersByTime
- Обработка Promise и асинхронных операций
- Тестирование useEffect хуков
- Тестирование запросов с axios, fetch
- Timeout и обработка ошибок при ожидании
Тестирование React Hooks
- Библиотека @testing-library/react-hooks
- renderHook функция и её использование
- Возврат значений от hook-функций
- Тестирование useState хука
- Тестирование useEffect и его зависимостей
- Тестирование useContext хука
- Тестирование useReducer логики
- Тестирование useCallback и мемоизации
- Тестирование useMemo оптимизаций
- Кастомные hooks: тестирование и отладка
- act для обновления hook состояния
- Реидентификация и cleanup хук-ов
Мокирование и маскировка
- Понимание мокирования в тестах
- jest.mock функция основы
- jest.spyOn для шпионажа за функциями
- Модули mocks и их очистка
- beforeEach, afterEach для setup и cleanup
- jest.clearAllMocks vs jest.resetAllMocks
- Мокирование встроенных API: localStorage, fetch
- window.matchMedia мокирование
- IntersectionObserver мокирование
- ResizeObserver мокирование
- console методов мокирование для clean output
- Мокирование модулей с require.cache
Мокирование HTTP запросов
- Зачем нужно мокировать HTTP запросы
- jest-fetch-mock для fetch API
- Мокирование axios запросов
- MSW (Mock Service Worker) основы
- Настройка MSW для Jest среды
- Обработчики (handlers) для GET, POST, PUT, DELETE
- Динамические ответы сервера в тестах
- Симуляция ошибок и network failures
- Задержки ответов: симуляция медленной сети
- REST и GraphQL endpoints
- Реиспользование mock handlers между тестами
Мокирование компонентов
- Мокирование дочерних компонентов
- jest.mock для компонентов
- Partial mocks в React
- Мокирование node_modules компонентов
- Мокирование внешних библиотек
- jest.requireActual для частичного реального компонента
- Глубокие моки сложных систем
- Избежание чрезмерного мокирования
Тестирование форм
- Стратегия тестирования форм
- Тестирование input полей: текст, число, email
- Validation сообщения в формах
- Submit форм и обработчики
- Тестирование checkboxes и radio buttons
- Выбор элементов из select и option
- Работа с textarea
- Очистка формы и reset функциональность
- Тестирование multi-step форм
- Собственные валидаторы форм
- Работа с библиотеками: React Hook Form, Formik
- Условное отображение полей форм
- Динамическое добавление и удаление полей
Тестирование роутинга
- React Router основы в тестировании
- MemoryRouter для тестов
- Рендеринг компонентов с маршрутами
- Навигация между страницами в тестах
- Параметры URL и их извлечение
- Query параметры тестирование
- Перенаправления и redirects
- Ленивая загрузка маршрутов (lazy routes)
- History API взаимодействие в тестах
- useNavigate hook тестирование
- useLocation hook тестирование
- useParams hook тестирование
- Hash и базовые маршруты
Тестирование глобального состояния
- Context API и тестирование
- Провайдеры контекста в тестах
- Мокирование контекста значений
- Redux и тестирование с reducer-ами
- Redux mock store подходы
- Тестирование actions и selectors
- Zustand тестирование
- Jotai и другие атом-базированные хранилища
- Recoil тестирование
- MobX интеграция в тесты
- Пересечение нескольких провайдеров
Тестирование сложных компонентов
- Компоненты с множественным состоянием
- Иерархия компонентов родитель-потомок
- Пробросивание props и их проверка
- Коллбеки и функции обратного вызова
- Ref и forwardRef тестирование
- Portal компоненты: модали, тосты
- Fragment и условный рендеринг
- Render props паттерн тестирование
- Higher Order Components тестирование
- Render функции и children как функции
Тестирование List и Table компонентов
- Рендеринг списков с map
- Ключи (keys) и их значение в тестировании
- Фильтрация элементов списка
- Сортировка данных в таблицах
- Пагинация и её тестирование
- Virtual скролл компоненты
- Бесконечный скролл (infinite scroll)
- Добавление и удаление элементов динамически
- Обновление элементов в списке
- Поиск и фильтр взаимодействие
Тестирование стилей и CSS
- Проверка классов CSS на элементе
- Проверка inline стилей
- Computed стили и getComputedStyle
- Display: none и visibility: hidden
- CSS Modules и их тестирование
- CSS-in-JS библиотеки (styled-components, emotion)
- Visibility и accessibility testing
- z-index и наслоение элементов
Тестирование анимаций
- CSS анимации мокирование
- Переходы и transitions в тестах
- Фреймворки анимаций: Framer Motion
- requestAnimationFrame мокирование
- Ожидание завершения анимаций
- Jest timer для контроля анимаций
- Отключение анимаций в тестах для скорости
Тестирование доступности (Accessibility)
- Принципы WCAG в тестировании
- Скринридеры и их эмуляция
- Роли ARIA и их правильное использование
- Лейблы и их ассоциация с полями
- Цветовой контраст проверка
- Семантическое HTML тестирование
- Описание изображений (alt текст)
- Aria-label и aria-labelledby
- Aria-hidden для скрытого контента
- Live regions и динамический контент
- jest-axe для автоматической a11y проверки
Снимки (Snapshots)
- Понимание snapshot тестирования
- Создание первых snapshot тестов
- Обновление snapshot когда ожидается
- Проблемы с snapshot тестированием
- Inline vs external snapshots
- Сравнение snapshot файлов
- Когда использовать snapshot тесты
- Когда избегать snapshot тестов
- Лучшие практики для снимков
Конфигурация и Setup
- Jest конфигурация расширенно
- setupFilesAfterEnv для глобального setup
- testEnvironment конфигурация
- Module resolution и moduleNameMapper
- Transform и babel конфигурация
- Coverage пороги и целевые показатели
- Игнорирование файлов и директорий
- Расширенные jest опции
- Vitest конфигурация отличия
- Переход с Jest на Vitest
Тестовое окружение
- Node vs jsdom окружение
- happy-dom как альтернатива
- Browser-like окружение в тестах
- Глобальные объекты: window, document, navigator
- Local storage и session storage
- Cookies в тестировании
- Timer API: setTimeout, setInterval
- requestIdleCallback эмуляция
- Обработка ошибок и console
- Корректное очищение окружения между тестами
Организация и архитектура тестов
- Структура файлов и папок
- Нейминг соглашения для тестовых файлов
- Группировка тестов с describe
- Arrange-Act-Assert паттерн
- Given-When-Then соглашение
- Фабрики и фикстуры для данных
- Вспомогательные функции и утилиты
- Переиспользование kода между тестами
- DRY принцип в тестовом коде
- Разделение логики и представления
Custom Render и обёртки
- Создание custom render функции
- Провайдеры и обёртки компонентов
- Глобальная конфигурация в render
- RTL renderHook и другие вспомогательные
- Наследование custom render
- Тестовые компоненты для setup
- Утилиты для общего тестового кода
- Экспорт и переиспользование test utils
Отладка тестов
- screen.debug() для вывода DOM
- screen.logTestingPlaygroundURL()
- Testing Playground интерактивный инструмент
- Вывод jest output в детали
- Отладчик и breakpoints в тестах
- console.log и временные вывода
- Ошибки и их интерпретация
- Чтение stack trace стеков
- Логирование асинхронных операций
- Inspect элементы в DevTools
Производительность тестов
- Измерение времени выполнения тестов
- Параллельное выполнение тестов
- Сериализация тестов когда нужно
- Кэширование результатов
- Оптимизация мокирования
- Быстрые vs медленные тесты
- Профилирование памяти в тестах
- Утечки памяти в тестовом коде
- Jest watchMode оптимизация
- Только релевантные тесты запуск
Coverage и отчётность
- Code coverage метрики
- Генерация coverage отчётов
- HTML coverage report
- Игнорирование кода от покрытия
- Анализ coverage data
- Интеграция с CI/CD
- Coverage trends отслеживание
- Разница между 100% и практическим покрытием
Непрерывная интеграция (CI)
- Запуск тестов в CI окружении
- GitHub Actions для тестирования
- GitLab CI тестирование
- Jenkins с React тестами
- Circle CI конфигурация
- Artifacts и логирование в CI
- Параллельное выполнение в CI
- Кэширование зависимостей
- Уведомления о failed тестах
- Coverage reports в CI
Инструменты и экосистема
- Jest документация и ресурсы
- Vitest альтернатива
- Cypress для e2e тестирования
- Playwright интеграция
- Puppeteer и headless браузеры
- Tester библиотеки сравнение
- VS Code расширения для тестирования
- WebStorm IDE встроенная поддержка
- Git hooks и pre-commit тесты
- Husky и lint-staged
Patterns и Best Practices
- Тестирование поведения vs реализации
- Избежание хрупких тестов
- Refactoring тестового кода
- DRY vs правильная декомпозиция
- Читаемость первый приоритет
- Названия тестов должны быть понятны
- Один assert vs несколько
- Рассмотрение граничных случаев
- Положительные и отрицательные случаи
- Тестирование error состояний
Типовые проблемы и решения
- "Cannot find element" ошибка
- Таймауты и waitFor зависание
- State updates в unmounted компонентах
- Act warning в консоли
- Несоответствие между тестом и браузером
- Async операции не завершаются
- Моки не работают как ожидается
- Snapshot тесты часто обновляются
- Высокая связанность тестов между собой
- Хрупкие селекторы в queries
- Параллельные тесты конфликты
Интеграция с инструментами
- Webpack dev server тестирование
- Vite integration for tests
- Create React App preset
- Next.js специфика тестирования
- Remix тестирование особенности
- Gatsby проекты тестирование
- Electron React приложения
- React Native тестирование
- SSR (Server Side Rendering) тесты
Миграция и обновления
- Миграция с Enzyme на RTL
- Переход между версий RTL
- Обновление Jest версий
- Breaking changes в зависимостях
- Совместимость версий
- Документация для миграции
- Скрипты автоматической миграции
- Постепенный переход стратегия
Документирование тестов
- Комментарии в тестовом коде
- Docstrings для test utilities
- ADR (Architecture Decision Records)
- Testing стратегия документ
- Конвенции в проекте
- Вики и knowledge base
- Примеры тестовых паттернов