Настройка React Testing Library и Vitest/Jest
Установите и настройте Vitest/Jest вместе с React Testing Library; используйте jsdom, рендерьте компоненты и обращайтесь к DOM как пользователь.
«Настройка React Testing Library и Vitest/Jest» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Почему выбран этот набор инструментов
Цель: Проверять компоненты так, как с ними взаимодействует пользователь.
- Среда запуска Vitest/Jest
- Окружение jsdom
- React Testing Library (RTL)
Установка и окружение
Установка:
- npm i -D vitest @testing-library/react @testing-library/user-event jsdom
- Настройте окружение проверок как jsdom
- Добавьте сценарии: test, test:watch
Демонстрационный компонент для проверки
Этот небольшой компонент предоставляет понятные роли, имя и состояние, поэтому его можно находить в проверках.
<div id="root"></div>
Предпросмотр содержимого файла проверки
Предпросмотр проверки с использованием RTL и Vitest. Содержимое файла показано для справки.
<div id="root"></div>
Основные настройки
- Окружение: jsdom
- Настройка: при необходимости добавьте @testing-library/jest-dom
- Сценарии: "test", "test:watch"
Выполняйте запросы как пользователь
Предпочтительные запросы:
- getByRole / findByRole
- getByLabelText
- getByText
Используйте идентификаторы тестов только в тех случаях, когда подходящего запроса по доступности нет.
Проверка рекомендаций по запросам RTL
Итоги
Итоги: Установите Vitest/Jest и RTL, настройте jsdom, отображайте компоненты и отдавайте предпочтение запросам по роли и метке. Добавьте user-event для реалистичного взаимодействия.
Часто задаваемые вопросы
Урок «Настройка React Testing Library и Vitest/Jest» бесплатный?
Да — полный текст урока «Настройка React Testing Library и Vitest/Jest» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Настройка React Testing Library и Vitest/Jest»?
Установите и настройте Vitest/Jest вместе с React Testing Library; используйте jsdom, рендерьте компоненты и обращайтесь к DOM как пользователь. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Настройка React Testing Library и Vitest/Jest»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка React Testing Library и Vitest/Jest
- Запросы, события и проверки — формы и асинхронный интерфейс
- Имитация загрузки данных и таймеров