Имитация загрузки данных и таймеров
Подменяйте сеть с помощью имитаций fetch и управляйте временем через ненастоящие таймеры; пишите стабильные быстрые тесты асинхронных компонентов.
«Имитация загрузки данных и таймеров» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Зачем имитировать сеть и время
Цель: Имитировать асинхронную работу, чтобы проверки были быстрыми и надёжными.
- Подменять ответы fetch
- Управлять таймерами с помощью имитации часов
- Проверять результаты с помощью findBy*/waitFor
Распространённые шаблоны
- fetch: spyOn global.fetch → mockResolvedValue
- Таймеры: vi.useFakeTimers(); ускоряйте таймеры
- Для асинхронного DOM отдавайте предпочтение findBy*
Демонстрация: виджет, получающий данные по нажатию
В проверках имитируйте fetch, чтобы данные возвращались мгновенно. Здесь интерфейс имитирует медленное получение данных с помощью setTimeout.
<div id="root"></div>
Демонстрация: сообщение на основе таймера
Используйте имитацию таймеров в проверках, чтобы не ждать. Переместите время вперёд и проверьте сообщение.
<div id="root"></div>
Справка: фрагменты проверок
Справочные фрагменты проверок (только для отображения): шпион для fetch и имитация таймеров с помощью Vitest.
<div id="root"></div>
Советы и подводные камни
- Очищайте шпионы: вызывайте mockRestore после каждой проверки
- Используйте findBy* для асинхронного интерфейса
- Возвращайтесь к обычным таймерам с помощью useRealTimers
Лучшая практика проверки таймеров
Итоги
Итоги: Имитируйте fetch, чтобы управлять ответами, и используйте имитацию таймеров, чтобы мгновенно перемещать время вперёд. Для стабильных асинхронных проверок используйте findBy*/waitFor.
Часто задаваемые вопросы
Урок «Имитация загрузки данных и таймеров» бесплатный?
Да — полный текст урока «Имитация загрузки данных и таймеров» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Имитация загрузки данных и таймеров»?
Подменяйте сеть с помощью имитаций fetch и управляйте временем через ненастоящие таймеры; пишите стабильные быстрые тесты асинхронных компонентов. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Имитация загрузки данных и таймеров»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка React Testing Library и Vitest/Jest
- Запросы, события и проверки — формы и асинхронный интерфейс
- Имитация загрузки данных и таймеров