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

Обзор

Vitest — это очень быстрый фреймворк для модульного тестирования, построенный на основе Vite.

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

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

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

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

Узнайте, как установить с помощью видео

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

TIP

Vitest требует Vite версии >=v3.0.0 и Node версии >=v14.18

Рекомендуется установить 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);
});

Чтобы запустить тест, добавьте следующий раздел в ваш 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 (transform 23ms, setup 0ms, collect 16ms, tests 2ms, environment 0ms, prepare 106ms)

Узнайте больше об использовании 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
graphql	GitHub	Play Online
image-snapshot	GitHub	Play Online
lit	GitHub	Play Online
mocks	GitHub	Play Online
nextjs	GitHub	Play Online
playwright	GitHub
puppeteer	GitHub
react-enzyme	GitHub	Play Online
react-mui	GitHub	Play Online
react-storybook	GitHub	Play Online
react-testing-lib-msw	GitHub	Play Online
react-testing-lib	GitHub	Play Online
react	GitHub	Play Online
ruby	GitHub	Play Online
solid	GitHub	Play Online
svelte	GitHub	Play Online
vitesse	GitHub	Play Online
vue-jsx	GitHub	Play Online
vue	GitHub	Play Online
vue2	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.