Vue Academy · Урок

Настройка Vitest для проектов Vue

vitest.config.ts, окружение jsdom, @vue/test-utils, покрытие с помощью v8 и скрипт тестирования

«Настройка Vitest для проектов Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Почему для Vue стоит выбрать Vitest

Vitest — быстрое средство запуска тестов на основе Vite. Поскольку проекты Vue 3 уже используют Vite, Vitest повторно использует ту же конфигурацию и преобразования — для тестов не нужен отдельный конвейер сборки.

Он предоставляет API, похожий на Jest, с встроенной поддержкой ESM и TypeScript.

Установка инструментов

Добавьте Vitest, утилиты для тестирования Vue и jsdom (DOM, похожий на браузерный, для Node).

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

Среда jsdom

Компоненты нужно монтировать в DOM. В Node нет DOM, поэтому тесты выполняются в jsdom, который имитирует браузерные API. Укажите его как среду тестирования в конфигурации.

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "jsdom",
  },
})

Включение глобальных функций

По умолчанию Вы импортируете describe, it и expect в каждом файле. Установка globals: true делает их доступными везде без импорта, как в Jest.

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

Типы TypeScript для глобальных функций

При использовании глобальных функций с TypeScript добавьте типы Vitest, чтобы редактор знал о describe и связанных с ним функциях.

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

Первый файл тестов

Vitest обнаруживает файлы, заканчивающиеся на .test.ts или .spec.ts. При включенных глобальных функциях тесты можно писать напрямую.

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

Монтирование компонента

После установки @vue/test-utils и настройки jsdom можно монтировать настоящие компоненты в тесте и проверять результат их отрисовки.

import { mount } from "@vue/test-utils"
import Hello from "./Hello.vue"

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

Добавление покрытия

Покрытие показывает, какие строки выполняются Вашими тестами. Vitest поддерживает провайдер v8 (быстрый и встроенный). Настройте его в разделе test.coverage.

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

HTML-отчет о покрытии

Отчетчик html создает отчет, который можно просматривать в браузере (по умолчанию coverage/index.html). Откройте его, чтобы увидеть покрытие строк и ветвлений по каждому файлу с выделенными пробелами.

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

Скрипты package.json

Добавьте удобные скрипты. test запускает набор тестов, а coverage — запуск с флагом покрытия.

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

Режим наблюдения и режим запуска

Обычный vitest остается в режиме наблюдения и повторно запускает затронутые тесты при сохранении — это удобно во время разработки. В CI нужен один проход с завершением процесса, поэтому используйте vitest run.

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете настройку Vitest.

Итоги

Вы настроили Vitest для проекта Vue:

Установите vitest, @vue/test-utils, jsdom и провайдер покрытия.
Укажите environment: "jsdom", чтобы у компонентов был DOM.
globals: true избавляет от импорта помощников тестирования; добавьте vitest/globals в типы tsconfig.
Настройте покрытие с провайдером v8 и отчетчиком html.
Добавьте скрипты test и coverage; в CI используйте vitest run.

Часто задаваемые вопросы

Урок «Настройка Vitest для проектов Vue» бесплатный?

Да — полный текст урока «Настройка Vitest для проектов Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка Vitest для проектов Vue»?

vitest.config.ts, окружение jsdom, @vue/test-utils, покрытие с помощью v8 и скрипт тестирования Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка Vitest для проектов Vue»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Настройка Vitest для проектов Vue
Монтирование и поиск компонентов
Тестирование взаимодействий пользователя и событий
Имитация композируемых модулей, хранилищ и API

← Назад к Vue Academy