Быстрый старт

Обзор

Vitest (произносится как "витест") — это фреймворк нового поколения для тестирования, основанный на Vite.

Подробнее о концепции проекта можно узнать в разделе Почему Vitest.

Попробовать Vitest онлайн

Вы можете попробовать Vitest онлайн на StackBlitz. Он запускает Vitest прямо в браузере и почти не отличается от локальной установки, но не требует установки ничего на ваш компьютер.

Добавление Vitest в ваш проект

Видеоинструкция по установке

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest требует Vite >=v5.0.0 и Node >=v18.0.0

Рекомендуется добавить vitest в ваш package.json, используя один из перечисленных выше методов. Однако, если вы предпочитаете запускать vitest напрямую, используйте npx vitest (инструмент npx поставляется с npm и Node.js).

Инструмент npx выполняет указанную команду. По умолчанию npx сначала проверяет наличие команды в локальных исполняемых файлах проекта. Если она там не найдена, npx ищет ее в системном $PATH и запускает, если находит. Если команда не найдена ни в одном из этих мест, npx устанавливает ее во временное расположение перед выполнением.

Написание тестов

В качестве примера мы напишем простой тест, который проверяет вывод функции сложения двух чисел.

// sum.js
export function sum(a, b) {
  return a + b;
}

// sum.test.js
import { expect, test } from 'vitest';
import { sum } from './sum.js';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

TIP

По умолчанию имена файлов тестов должны содержать ".test." или ".spec.".

Далее, чтобы выполнить тест, добавьте следующий раздел в ваш package.json:

{
  "scripts": {
    "test": "vitest"
  }
}

Наконец, запустите npm run test, yarn test или pnpm test, в зависимости от вашего менеджера пакетов, и Vitest отобразит следующее сообщение:

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

WARNING

Если вы используете Bun в качестве менеджера пакетов, убедитесь, что используете команду bun run test вместо bun test, иначе Bun запустит свой собственный тестовый раннер.

Подробнее об использовании Vitest см. в разделе API.

Настройка Vitest

Одним из основных преимуществ Vitest является его унифицированная конфигурация с Vite. Если присутствует, vitest будет читать ваш корневой vite.config.ts, чтобы использовать те же плагины и настройки, что и ваше приложение Vite. Например, конфигурация Vite для resolve.alias и plugins будет работать сразу. Если вы хотите другую конфигурацию во время тестирования, вы можете:

• Создать vitest.config.ts, который будет иметь более высокий приоритет
• Передать опцию --config в CLI, например, vitest --config ./path/to/vitest.config.ts
• Использовать process.env.VITEST или свойство mode в defineConfig (будет установлено в test, если не переопределено) для условного применения различных конфигураций в vite.config.ts

Vitest поддерживает те же расширения для файлов конфигурации, что и Vite: .js, .mjs, .cjs, .ts, .cts, .mts. Расширение .json не поддерживается.

Если вы не используете Vite в качестве инструмента сборки, вы можете настроить Vitest, используя свойство test в вашем файле конфигурации:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // ...
  },
});

TIP

Даже если вы сами не используете Vite, Vitest сильно зависит от него для своего конвейера преобразования. По этой причине вы также можете настроить любое свойство, описанное в документации Vite.

Если вы уже используете Vite, добавьте свойство test в вашу конфигурацию Vite. Вам также потребуется добавить ссылку на типы Vitest, используя директиву с тремя слэшами в начале вашего файла конфигурации.

/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ...
  },
});

<reference types="vitest" /> будет устаревшим в Vitest 3, но вы можете начать миграцию на vitest/config в Vitest 2.1:

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ... Укажите опции здесь.
  },
});

Список опций конфигурации см. в Справочнике по конфигурации

WARNING

Если вы решите иметь два отдельных файла конфигурации для Vite и Vitest, убедитесь, что определили те же опции Vite в вашем файле конфигурации Vitest, так как он переопределит ваш файл Vite, а не расширит его. Вы также можете использовать метод mergeConfig из vite или vitest/config для объединения конфигурации Vite с конфигурацией Vitest:

vitest.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config.mjs';

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      // ...
    },
  })
);

vite.config.mjs

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue()],
});

Однако мы рекомендуем использовать один и тот же файл для Vite и Vitest, вместо создания двух отдельных.

Поддержка рабочих пространств

Запускайте различные конфигурации проекта в рамках одного проекта с помощью Vitest Workspaces. Вы можете определить список файлов и папок, составляющих ваше рабочее пространство, в файле vitest.workspace. Файл поддерживает расширения js, ts и json. Эта функция отлично подходит для монорепозиториев.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // вы можете использовать список глоб-шаблонов для определения ваших рабочих пространств
  // Vitest ожидает список файлов конфигурации
  // или каталогов, содержащих файл конфигурации
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // вы даже можете запускать одни и те же тесты,
  // но с разными конфигурациями в рамках одного процесса Vitest
  {
    test: {
      name: 'happy-dom',
      root: './shared_tests',
      environment: 'happy-dom',
      setupFiles: ['./setup.happy-dom.ts'],
    },
  },
  {
    test: {
      name: 'node',
      root: './shared_tests',
      environment: 'node',
      setupFiles: ['./setup.node.ts'],
    },
  },
]);

Интерфейс командной строки

В проекте, где установлен Vitest, вы можете использовать исполняемый файл vitest в своих npm-скриптах или запускать его напрямую с помощью npx vitest. Вот стандартные npm-скрипты в шаблонном проекте Vitest:

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

Чтобы запустить тесты один раз без отслеживания изменений файлов, используйте vitest run. Вы можете указать дополнительные опции CLI, такие как --port или --https. Полный список опций CLI можно получить, запустив npx vitest --help в вашем проекте.

Подробнее об Интерфейсе командной строки

Автоматическая установка зависимостей

Vitest предложит установить определенные зависимости, если они еще не установлены. Вы можете отключить это поведение, установив переменную окружения VITEST_SKIP_INSTALL_CHECKS=1.

Интеграции с IDE

Мы также предлагаем официальное расширение для Visual Studio Code, чтобы улучшить ваш опыт тестирования с Vitest.

Установить из VS Code Marketplace

Подробнее об Интеграциях с IDE

Примеры

Пример	Исходный код	Песочница
basic	GitHub	Играть онлайн
fastify	GitHub	Играть онлайн
in-source-test	GitHub	Играть онлайн
lit	GitHub	Играть онлайн
vue	GitHub	Играть онлайн
marko	GitHub	Играть онлайн
preact	GitHub	Играть онлайн
react	GitHub	Играть онлайн
solid	GitHub	Играть онлайн
svelte	GitHub	Играть онлайн
sveltekit	GitHub	Играть онлайн
profiling	GitHub	Недоступно
typecheck	GitHub	Играть онлайн
workspace	GitHub	Играть онлайн

Проекты, использующие Vitest

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• vitesse
• vitesse-lite
• fluent-vue
• vueuse
• milkdown
• gridjs-svelte
• spring-easing
• bytemd
• faker
• million
• Vitamin
• neodrag
• svelte-multiselect
• iconify
• tdesign-vue-next
• cz-git

Использование неопубликованных коммитов

Каждый коммит в основной ветке и каждый PR с меткой cr-tracked публикуется на pkg.pr.new. Вы можете установить его, выполнив команду npm i https://pkg.pr.new/vitest@{commit}.

Если вы хотите протестировать свои изменения локально, вы можете собрать и связать их самостоятельно (требуется pnpm):

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # вы можете использовать предпочитаемый менеджер пакетов для этого шага

Затем перейдите в проект, где вы используете Vitest, и запустите pnpm link --global vitest (или менеджер пакетов, который вы использовали для глобальной привязки vitest).

Сообщество

Если у вас есть вопросы или вам нужна помощь, присоединитесь к сообществу в Discord и на GitHub Discussions.