Начало работы

Обзор

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 установит её во временное хранилище перед выполнением.

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

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

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

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. Vitest не поддерживает расширение .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/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.config.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // вы можете использовать список глобальных шаблонов для определения ваших проектов
      // 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	Играть онлайн
projects	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.