Запросы, события и проверки — формы и асинхронный интерфейс
Используйте запросы getBy/findBy, user-event для ввода и щелчков и проверки jest-dom. Уверенно тестируйте формы и асинхронные экраны.
«Запросы, события и проверки — формы и асинхронный интерфейс» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Проверки с точки зрения пользователя
Цель: Выполнять проверки так, как это делает пользователь.
- Запросы: getBy*/findBy*
- События: user-event (щелчок, ввод текста)
- Проверки утверждений: jest-dom
Запросы: выберите подходящий
- getBy*: синхронный; завершается ошибкой, если элемент отсутствует
- findBy*: асинхронный; ожидает появления элемента
- queryBy*: возвращает null, если элемент отсутствует
- Отдавайте предпочтение роли и метке, а не идентификаторам тестов
Демонстрация: доступная форма входа
Форма с метками и кнопкой отправки. Идеально подходит для getByLabelText, getByRole и ввода текста пользователем.
<div id="root"></div>
Демонстрация: асинхронный список (загрузка → элементы)
Имитация асинхронного получения данных: сначала отображается индикатор загрузки, затем элементы. В проверках следует использовать findBy* или waitFor.
<div id="root"></div>
Проверки и события
- toBeInTheDocument, toBeDisabled, toHaveTextContent
- Используйте findBy* для асинхронного интерфейса
- Отдавайте предпочтение user-event, а не fireEvent
Шаблоны и подводные камни
Шаблоны:
- Подготовьте → выполните действие (user-event) → проверьте результат
- Асинхронный код: await findBy* или waitFor
- Избегайте произвольных задержек; проверки должны выполняться быстро
Лучшая практика асинхронной проверки
Итоги
Итоги: Отдавайте предпочтение запросам по роли и метке, управляйте интерфейсом с помощью user-event, а результаты проверяйте средствами jest-dom. Для асинхронного интерфейса используйте await findBy* или оборачивайте действие в waitFor.
Часто задаваемые вопросы
Урок «Запросы, события и проверки — формы и асинхронный интерфейс» бесплатный?
Да — полный текст урока «Запросы, события и проверки — формы и асинхронный интерфейс» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Запросы, события и проверки — формы и асинхронный интерфейс»?
Используйте запросы getBy/findBy, user-event для ввода и щелчков и проверки jest-dom. Уверенно тестируйте формы и асинхронные экраны. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Запросы, события и проверки — формы и асинхронный интерфейс»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка React Testing Library и Vitest/Jest
- Запросы, события и проверки — формы и асинхронный интерфейс
- Имитация загрузки данных и таймеров