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

Обзор

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 1.0 требует Vite версии >=v5.0.0 и Node версии >=v18.0.0

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

npx выполнит команду из локальной папки node_modules/.bin, при необходимости установив нужные пакеты. По умолчанию npx проверит наличие команды в $PATH или в локальных бинарных файлах проекта и выполнит ее, если найдет. Если команда не найдена, она будет установлена перед выполнением.

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

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

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

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

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

Узнайте больше об использовании Vitest в разделе API.

Настройка Vitest

Одно из главных преимуществ Vitest — общая конфигурация с Vite. Если у вас есть файл конфигурации 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: {
    // ...
  },
});

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

WARNING

Если вы решите использовать отдельные файлы конфигурации для Vite и Vitest, убедитесь, что в файле конфигурации Vitest указаны те же параметры Vite, так как он переопределит файл 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. Определите список файлов и папок, составляющих ваше рабочее пространство, в файле vitest.workspace. Поддерживаются расширения js, ts и json. Эта функция особенно полезна в монорепозиториях.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // you can use a list of glob patterns to define your workspaces
  // Vitest expects a list of config files
  // or directories where there is a config file
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // you can even run the same tests,
  // but with different configs in the same "vitest" process
  {
    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 в вашем проекте.

Узнайте больше об Интерфейсе командной строки

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

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

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

Узнайте больше об Интеграции с IDE

Примеры

Пример	Исходный код	Онлайн-песочница
basic	GitHub	Play Online
fastify	GitHub	Play Online
lit	GitHub	Play Online
marko	GitHub	Play Online
preact	GitHub	Play Online
react	GitHub	Play Online
solid	GitHub	Play Online
sveltekit	GitHub	Play Online
typecheck	GitHub	Play Online
workspace	GitHub	Play Online

Проекты, использующие 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

Использование нестабильных версий

Если вы хотите протестировать новейшие функции до официального релиза, клонируйте репозиторий Vitest на свой компьютер, соберите и свяжите его вручную (требуется 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.