React Testing Library. Полный курс

• Евгений Ковальчук приветствует зрителей на канале "Веб-Дэф".  

• Курс посвящен тестированию React-компонентов с использованием библиотеки Testing Library.  

• Основной принцип Testing Library: тесты должны быть максимально похожи на реальное взаимодействие пользователя с интерфейсом.  

• Курс включает темы: отрисовка, поисковые типы и варианты, события, синхронное тестирование, тестирование React Router и Redux.  

• Рекомендуется пересмотреть плейлисты по React Router, Redux и React-хукам для лучшего понимания.  

• Для установки необходимых зависимостей понадобится Node.js.  

• Рекомендуется использовать Create-React-App для базовой среды разработки.  

• После установки проекта необходимо добавить шесть дополнительных зависимостей.  

• Testing Library уже интегрирована в Create-React-App, поэтому дополнительных настроек не требуется.  

• В проекте уже есть файл setup.test.js и первый тестировочный кейс.  

• Для запуска тестов используется команда yarn test, которая автоматически перезапускается при изменениях.  

• При запуске тестов с проверкой покрытия возникает ошибка из-за версии библиотеки.  

• Для решения проблемы нужно откатиться на версию 3.4.0, что можно сделать командой yarn add react-scripts@3.4.0.  

• В будущем проблема будет исправлена, но пока это временное решение.  

• Визуальная идентификация тестов с помощью зеленой галочки.  

• Кнопка "вью снапшот" для быстрого доступа к снимкам.  

• Кнопка "дебак" для удобного отладки упавших тестов.  

• Обзор особенностей библиотеки и её отличий от Enzyme.  

• Пример теста с использованием метода "гет-бай текст".  

• Преимущества использования регулярных выражений для поиска элементов.  

• Стабильность тестов благодаря абстрагированию от внутренней реализации.  

• Возможность работы с реальными DOM-узлами.  

• Пример использования метода "дебак" для получения полной разметки приложения.  

• Использование метода "гет-бай текст" для поиска элементов по тексту.  

• Преимущества регулярных выражений для гибкого тестирования.  

• Метод "гет-бай рол" для выбора элементов по атрибутам и ролям.  

• Методы "гет-бай лейбл текст", "гет-бай плейс холдер текст", "гет-бай альт текст" и "гет-бай дисплей вел".  

• Примеры использования этих методов для поиска элементов по различным атрибутам.  

• Проверка дефолтных значений для элементов форм.  

• Обзор различных поисковых вариантов: getBy, queryBy, findBy.  

• Использование утверждений для проверки наличия элементов.  

• getBy возвращает элемент или ошибку, что затрудняет проверку отсутствия элементов.  

• queryBy возвращает элемент, если он существует, что позволяет избежать ошибок.  

• Пример с регулярным выражением и параграфом.  

• Использование queryBy для проверки отсутствия элемента.  

• findBy используется для синхронных элементов, которые появляются при выполнении кода.  

• Пример с асинхронным запросом и отображением заголовка.  

• Пример с асинхронным запросом и отображением заголовка.  

• Использование ключевых слов before и after для проверки изменений.  

• Использование getAll, queryAll и findAll для поиска нескольких элементов.  

• Таблица на официальном сайте для выбора оптимального варианта.  

• Обзор утверждений: наличие класса, стиля, обязательности заполнения.  

• Использование ключевых слов not и empty для проверки отсутствия и пустоты.  

• Имитация взаимодействия пользователя с интерфейсом.  

• Пример с изменением значения в поле ввода.  

• Обработка асинхронных операций с помощью useEffect.  

• Пример с проверкой состояния чекбокса после клика.  

• Использование атрибута data-test-id для поиска элементов.  

• Проверка фокуса элемента с помощью утверждений.  

• Пользовательские события UserEvent имитируют реальное поведение браузера.  

• UserEvent содержит события, такие как keydown, keypress, keyup.  

• UserEvent позволяет более точно описывать тест-кейсы.  

• Подключение модуля для работы с UserEvent.  

• Пример использования UserEvent для ввода текста в поле.  

• Возможность описания дополнительных опций, таких как нажатие кнопок Ctrl или Shift.  

• Пример тестирования перемещения по интерфейсу с помощью кнопки Tap.  

• Использование UserEvent для эмуляции нажатия на кнопку и проверки фокуса на элементах.  

• Проверка фокуса на чекбоксе, радиокнопке и поле номера.  

• Рендеринг разметки с select-элементом.  

• Использование метода selectOptions для выбора опций.  

• Проверка выбора опций и снятие выбора с одной из них.  

• Использование библиотеки Axios для асинхронных запросов.  

• Мокинг функций для запроса и проверка состояния компонента.  

• Пример тестирования асинхронного запроса и проверка ответа.  

• Тестирование портала, который рендерится внутри заданного элемента.  

• Проверка отрисовывания компонента портала и удаления его при размонтировании.  

• Тестирование контекста, который позволяет пробрасывать props через несколько уровней.  

• Создание контекста и компонента провайдера с состоянием логина пользователя.  

• Использование функции переключения состояния и передача её дочерним компонентам.  

• Проверка отображения компонента с дефолтным текстом и переключение текста при нажатии кнопки.  

• Создание компонентов для тестирования хуков роутинга.  

• Проверка корректного отображения страниц и работы хуков.  

• Тестирование кейсов перемещения по страницам и обработки ошибок.  

• Создание функции рендер уиз роутер для упрощения кода.  

• Использование функции для обертывания компонента роутером и создания истории.  

• Удаление дублирующегося кода и улучшение структуры тестов.  

• Добавление папки редакции и файла редюсер с логикой счетчика.  

• Создание функции рендер уиз редакс для обертывания компонента и передачи стейта.  

• Тестирование базового состояния и работы редюсера на изменение счетчика.  

• Создание файла юс редюсер точка. тест точка джес для тестирования хука.  

• Проверка начального состояния и работы хука при изменении значения счетчика.  

• Тестирование логики увеличения и уменьшения значения счетчика.  

• Независимо от подхода, библиотека Redux или хук useEffect, алгоритм проверки одинаков.  

• Важно проверять основную логику, а не углубляться в детали.  

• Видео содержит список лучших практик для тестирования с использованием библиотеки Redux.  

• Не используйте `wrapper` как переменную для возвращаемого значения из метода `render`.  

• Метод `cleanup` устарел и больше не нужен, так как очистка происходит автоматически.  

• Используйте метод `screen` для отладки, который был добавлен в версии 6.11.  

• Используйте правильные утверждения для тестов, чтобы получать понятные ошибки.  

• Применяйте правильные запросы, такие как `getBy` и `findBy`.  

• Не используйте контейнеры для поисковых запросов, чтобы тесты были чище и понятнее.  

• Поиск по тексту может быть оптимальнее, чем использование других механизмов.  

• Не добавляйте ненужные атрибуты accessibility, чтобы не запутать разработчиков и устройства.  

• Используйте метод `getByRole` для поиска элементов по ролям.  

• Активно используйте userEvent вместо fireEvent.  

• Используйте caret только для проверки, что элемент не может быть найден.  

• Рекомендации по использованию конструкции `waitFor`.  

• Используйте `find` вместо `waitFor` для запросов, которые еще не существуют.  

• Не оставляйте `waitFor` пустым, чтобы избежать хрупкости тестов.  

• Не используйте более одного утверждения в колбеке внутри `waitFor`.  

• Не оборачивайте `render` и `fireEvent` в `expect`.  

• В новых версиях библиотеки эта функциональность уже встроена.  

• Весь код лекций доступен в репозитории GitHub.