Учебник Enzyme

Введение в тестирование React-компонентов
- Краткая история тестирования UI
- Почему Enzyme?
- Enzyme в экосистеме тестирования
- Сравнение с альтернативами
Основы и установка
- Что такое Enzyme?
- Архитектура Enzyme
- Адаптеры и их роль
- Установка и конфигурация
- Настройка для React 17 и выше
- Интеграция с тестовыми фреймворками
- Jest и Enzyme
- Mocha и Chai с Enzyme
- Проверка корректности установки
Концепции неглубокого тестирования
- Shallow rendering: назначение и возможности
- Изоляция компонентов от дочерних элементов
- Когда использовать shallow
- Когда избегать shallow
Методы рендеринга
- Shallow rendering в деталях
- Ограничения shallow
- Full DOM rendering: mount()
- Сценарии использования mount()
- Жизненный цикл в mount()
- Управление состоянием жизненного цикла
- Static rendering: render()
- Когда использовать render()
- Сравнительная таблица методов рендеринга
Селекторы и поиск элементов
- Базовые селекторы
- Поиск по тегу
- Поиск по классу
- Поиск по ID
- Поиск по типу компонента
- Комбинированные селекторы
- CSS-селекторы в Enzyme
- Селекторы по атрибутам
- Селекторы по состоянию
- Использование find() для поиска
- findWhere() и пользовательские фильтры
- Лучшие практики селекторов
Работа со свойствами и состоянием
- Получение props компонента
- prop() и props()
- Проверка передачи props
- Изменение props динамически
- setProps() и обновление компонента
- Получение state компонента
- state() для доступа к состоянию
- Изменение состояния через setState()
- setState() в тестах
- Проверка синхронизации между props и state
Интерактивное тестирование
- Симуляция событий
- simulate() для клика
- Симуляция события change
- Симуляция события focus и blur
- Симуляция события submit
- Симуляция клавиатурных событий
- Передача данных событий
- Работа с пользовательскими событиями
- Обработчики событий в тестах
Методы проверки и утверждения
- exists() и проверка наличия элемента
- length для количества элементов
- hasClass() для проверки класса
- is() для проверки селектора
- Получение текста содержимого
- text() и textContent
- Получение HTML-разметки
- html() для внутреннего HTML
- Проверка видимости элемента
- isEmptyRender() для проверки пустого рендера
Работа с дочерними элементами
- Навигация по дереву компонентов
- children() для получения потомков
- parent() для получения родителя
- closest() для поиска ближайшего предка
- dive() для глубокого проникновения
- Итерация по коллекциям элементов
- forEach() в Enzyme
- map() и filter() для элементов
- get() для доступа по индексу
- at() для выбора конкретного элемента
Работа с формами
- Тестирование input полей
- Симуляция ввода текста
- Проверка значения input
- Тестирование checkbox и radio
- Проверка состояния checked
- Тестирование select элементов
- Работа с option элементами
- Тестирование textarea
- Валидация формы в тестах
- Фокус и blur в формах
Работа с компонентами высшего порядка
- Что такое HOC
- Тестирование обёрнутых компонентов
- Получение исходного компонента
- .dive() для проникновения сквозь HOC
- Работа с несколькими уровнями обёртки
- Тестирование props, передаваемых через HOC
- Тестирование логики HOC
- Редакс-интеграция и тестирование
Асинхронное тестирование
- Промисы в тестах
- Работа с async/await
- setImmediate и nextTick
- act() для оборачивания асинхронных операций
- Ожидание обновления компонента
- waitFor() и альтернативы
- Тестирование API-вызовов
- Мокирование fetch и axios
- Таймауты и задержки
- Обработка ошибок в асинхронном коде
Мокирование и заглушки
- Мокирование модулей
- jest.mock() для подмены модулей
- Мокирование дочерних компонентов
- Создание простых mock-компонентов
- Spy-функции и отслеживание вызовов
- jest.spyOn() для отслеживания методов
- Восстановление оригинального поведения
- Мокирование библиотек
- Мокирование локального хранилища
- Мокирование window объекта
Работа с контекстом
- Context API и тестирование
- Получение значения из Context
- Предоставление Context-значения в тестах
- Обёрнутые компоненты с Context
- Тестирование useContext хука
- Изменение значения Context в тестах
Тестирование хуков
- Введение в хуки React
- Ограничения Enzyme для хуков
- Альтернативные подходы для хуков
- Тестирование useState через компонент
- Тестирование useEffect через компонент
- Тестирование useReducer
- Тестирование custom хуков
- react-hooks-testing-library как альтернатива
Обработка ошибок и граничные случаи
- Тестирование обработчиков ошибок
- Проверка Error Boundaries
- Симуляция ошибок компонентов
- Обработка пропущенных props
- Тестирование undefined и null
- Граничные значения в тестах
- Защита от неожиданных состояний
Снимки и регрессионное тестирование
- Что такое snapshot тесты
- Создание снимков в Enzyme
- Сравнение снимков при обновлении
- Обновление устаревших снимков
- Когда использовать снимки
- Когда избегать снимков
- Лучшие практики снимков
- Снимки с jest.snapshot()
Структурирование и организация тестов
- Структура тестовых файлов
- Описание тестовых наборов с describe()
- Организация по типам тестов
- Setup и teardown с beforeEach и afterEach
- Повторное использование кода в тестах
- Создание вспомогательных функций
- Page Object Pattern в тестах
- Инкапсуляция селекторов
Тестирование стилей и CSS
- Проверка атрибута className
- Проверка встроенных стилей
- Проверка стилей через style
- Интеграция с CSS-in-JS библиотеками
- Тестирование media queries через стили
- Условные стили и классы
Интеграционное тестирование
- Отличие интеграционных тестов от unit-тестов
- Тестирование взаимодействия компонентов
- Mount вместо shallow для интеграционных тестов
- Тестирование потока данных между компонентами
- Симуляция реального пользовательского поведения
- Тестирование с несколькими компонентами
- Изоляция при интеграционном тестировании
Производительность и оптимизация тестов
- Измерение времени выполнения тестов
- Ленивая загрузка и оптимизация mount
- Переиспользование фиксетур
- Параллельное выполнение тестов
- Кеширование в тестах
- Профилирование тестов
Расширение функциональности Enzyme
- Пользовательские методы с методы Enzyme
- Расширение ShallowWrapper
- Расширение ReactWrapper
- Создание пользовательских селекторов
- Плагины для Enzyme
- Интеграция с внешними библиотеками
Работа с React Router
- Тестирование маршрутизированных компонентов
- Обёртывание в BrowserRouter
- Тестирование Link и NavLink
- Проверка перенаправлений
- Симуляция навигации
- Тестирование параметров маршрута
- Тестирование query-параметров
Работа с Redux
- Структура Redux приложения в тестах
- Тестирование компонентов, подключённых к Redux
- Обёртывание Provider
- Мокирование Redux store
- Тестирование actions и reducers
- Изоляция компонентов от Redux
- Использование react-redux-mock-store
Работа с внешними библиотеками
- Интеграция с Material-UI
- Тестирование иконок и темы
- Работа с Ant Design компонентами
- Тестирование Bootstrap компонентов
- Интеграция с библиотеками анимации
- Тестирование modals и portals
Отладка тестов
- Использование debug()
- Вывод разметки компонента
- console.log для отладки
- Изучение props и state
- Пошаговое выполнение тестов
- Использование debugger
- VSCode debugging для тестов
- Chrome DevTools для тестов
Настройка окружения и конфигурация
- Файл jest.config.js
- Конфигурация babel для тестов
- Конфигурация webpack для тестов
- Переменные окружения в тестах
- Setup файлы для тестов
- Полифиллы для браузерных API
- Конфигурация для TypeScript
Миграция и обновление
- Обновление Enzyme версии
- Обновление адаптера
- Несовместимые изменения между версиями
- Миграция с enzyme-adapter
- Обновление синтаксиса при обновлении React
- Долгосрочная поддержка тестов
Лучшие практики и паттерны
- Правило AAA: Arrange, Act, Assert
- Один тест - один сценарий
- Описательные имена тестов
- Избегание flaky тестов
- Тестирование поведения, не реализации
- Принцип DRY в тестах
- Использование фиксетур
- Документирование сложных тестов
Антипаттерны и что избегать
- Над-детализированное мокирование
- Тестирование деталей реализации
- Плохие селекторы и их хрупкость
- Асинхронные проблемы и race conditions
- Зависимости между тестами
- Очень медленные тесты
- Нестабильные и нетерпеливые ожидания