Настройка Vitest для проектов Svelte
Настройте Vitest с плагином Svelte и окружением jsdom для тестирования компонентов.
«Настройка Vitest для проектов Svelte» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Vitest
Vitest — быстрый исполнитель тестов, нативный для Vite и широко используемый в экосистеме Svelte.
Установка
Добавьте Vitest и плагин Svelte.
npm install -D vitest @vitest/coverage-v8 @testing-library/svelte @testing-library/jest-dom jsdomКонфигурация в vite.config.js
Добавьте раздел для тестов.
export default defineConfig({
plugins: [sveltekit()],
test: { environment: "jsdom", globals: true, setupFiles: ["./vitest-setup.js"] }
});Файл настройки
Импортируйте сопоставители jest-dom в vitest-setup.js.
import "@testing-library/jest-dom";Запуск тестов
Добавьте сценарий в package.json и запустите его.
"test": "vitest"Режим наблюдения
По умолчанию Vitest работает в режиме наблюдения — это идеально для разработки через тестирование.
TypeScript
Vitest поддерживает TypeScript из коробки и предоставляет утверждения с учётом типов.
Покрытие
Создавайте отчёты о покрытии с помощью провайдера покрытия V8.
npx vitest run --coverageИнтеграция с CI
Используйте vitest run (без режима наблюдения) в CI для предсказуемого выполнения.
Тестирование по снимкам
Vitest поддерживает снимки, как Jest, для обнаружения регрессий.
Интеграция с IDE
Расширение Vitest для VS Code позволяет запускать тесты непосредственно в редакторе с помощью команд.
Быстрая проверка
Какую среду Vitest использует для тестов DOM?
Итоги
Настройте Vitest с jsdom, Testing Library и jest-dom для быстрых модульных тестов компонентов Svelte.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Настройка Vitest для проектов Svelte» бесплатный?
Да — полный текст урока «Настройка Vitest для проектов Svelte» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Настройка Vitest для проектов Svelte»?
Настройте Vitest с плагином Svelte и окружением jsdom для тестирования компонентов. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Настройка Vitest для проектов Svelte»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка Vitest для проектов Svelte
- @testing-library/svelte: render и fireEvent
- Тестирование хранилищ и реактивности
- Имитация модулей и Fetch