Возможности

• Поддержка конфигурации, трансформеров, резолверов и плагинов Vite
• Используйте те же настройки, что и в вашем приложении, для запуска тестов!
• Интеллектуальный и мгновенный режим отслеживания, аналогичный HMR для тестов!
• Тестирование компонентов для Vue, React, Svelte, Lit, Marko и других фреймворков
• Встроенная поддержка TypeScript / JSX
• Приоритет ESM, поддержка top-level await
• Многопоточность рабочих процессов через Tinypool
• Поддержка тестирования производительности с Tinybench
• Фильтрация, таймауты и параллельный запуск для наборов тестов и отдельных тестов
• Поддержка рабочих пространств
• Jest-совместимые снимки
• Встроенный Chai для утверждений + Jest expect совместимые API
• Встроенный Tinyspy для мокирования
• happy-dom или jsdom для мокирования DOM
• Режим браузера для запуска тестов компонентов в браузере
• Покрытие кода через v8 или istanbul
• Встроенное тестирование в стиле Rust
• Тестирование типов через expect-type
• Поддержка шардинга

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

Общая конфигурация между тестом, разработкой и сборкой

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

Подробнее см. Настройка Vitest.

Режим отслеживания

$ vitest

Когда вы изменяете исходный код или тестовые файлы, Vitest интеллектуально анализирует граф модулей и перезапускает только связанные тесты, точно так же, как работает HMR в Vite!

vitest запускается в watch mode по умолчанию в среде разработки и в run mode в среде CI (когда присутствует process.env.CI). Вы можете использовать vitest watch или vitest run для явного указания желаемого режима.

Запустите Vitest с флагом --standalone, чтобы он продолжал работать в фоновом режиме. Он не будет запускать никаких тестов, пока они не изменятся. Vitest не будет запускать тесты, если исходный код изменен, пока не будет запущен тест, который импортирует этот исходный код.

Общие веб-идиомы из коробки

Встроенная поддержка ES Module / TypeScript / JSX / PostCSS.

Потоки

По умолчанию Vitest запускает тестовые файлы в нескольких процессах, используя node:child_process через Tinypool (легковесный форк Piscina), что позволяет тестам выполняться одновременно. Если вы хотите еще больше ускорить свой тестовый набор, рассмотрите возможность включения --pool=threads для запуска тестов с использованием node:worker_threads (учитывайте, что некоторые пакеты могут не работать с этой настройкой).

Чтобы запустить тесты в одном потоке или процессе, см. poolOptions.

Vitest также изолирует среду каждого файла, чтобы изменения в одной среде не влияли на другие файлы. Изоляцию можно отключить, передав --no-isolate в CLI (пожертвовав корректностью ради скорости).

Фильтрация тестов

Vitest предоставляет множество способов сузить круг запускаемых тестов, чтобы ускорить тестирование и позволить вам сосредоточиться на разработке.

Подробнее о фильтрации тестов.

Параллельный запуск тестов

Используйте .concurrent в тестах, чтобы запускать их параллельно.

import { describe, it } from 'vitest';

// Два теста, помеченные как concurrent, будут запущены параллельно
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

Если вы используете .concurrent для набора, каждый тест в нем будет запущен параллельно.

import { describe, it } from 'vitest';

// Все тесты в этом наборе будут запущены параллельно
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

Вы также можете использовать .skip, .only и .todo в параллельных наборах и тестах. Подробнее см. в справочнике API.

WARNING

При запуске параллельных тестов снимки и утверждения должны использовать expect из локального контекста теста, чтобы гарантировать правильное определение теста.

Снимок

Поддержка снимков, совместимая с Jest.

import { expect, it } from 'vitest';

it('renders correctly', () => {
  const result = render();
  expect(result).toMatchSnapshot();
});

Подробнее см. Снимок.

Совместимость с Chai и Jest expect

Chai встроен для утверждений, используя API, совместимые с Jest expect.

Учтите, что если вы используете сторонние библиотеки, добавляющие матчеры, установка test.globals в true обеспечит лучшую совместимость.

Мокирование

Tinyspy встроен для мокирования с Jest-совместимыми API в объекте vi.

import { expect, vi } from 'vitest';

const fn = vi.fn();

fn('hello', 1);

expect(vi.isMockFunction(fn)).toBe(true);
expect(fn.mock.calls[0]).toEqual(['hello', 1]);

fn.mockImplementation((arg: string) => arg);

fn('world', 2);

expect(fn.mock.results[1].value).toBe('world');

Vitest поддерживает как happy-dom, так и jsdom для мокирования DOM и браузерных API. Они не входят в состав Vitest, вам нужно будет установить их отдельно:

$ npm i -D happy-dom
# или
$ npm i -D jsdom

После этого измените параметр environment в вашем файле конфигурации:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'happy-dom', // или 'jsdom', 'node'
  },
});

Подробнее см. Мокирование.

Покрытие

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

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

Подробнее см. Покрытие.

Встроенное тестирование

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

Это позволяет тестам использовать то же замыкание, что и реализации, и тестировать закрытые состояния без экспорта. Кроме того, это сокращает цикл обратной связи в процессе разработки.

// src/index.ts

// реализация
export function add(...args: number[]): number {
  return args.reduce((a, b) => a + b, 0);
}

// встроенные тестовые наборы
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('add', () => {
    expect(add()).toBe(0);
    expect(add(1)).toBe(1);
    expect(add(1, 2, 3)).toBe(6);
  });
}

Подробнее см. Встроенное тестирование.

Бенчмаркинг Экспериментально

Вы можете запускать бенчмарк-тесты с помощью функции bench через Tinybench для сравнения показателей производительности.

import { bench, describe } from 'vitest';

describe('sort', () => {
  bench('normal', () => {
    const x = [1, 5, 4, 2, 3];
    x.sort((a, b) => {
      return a - b;
    });
  });

  bench('reverse', () => {
    const x = [1, 5, 4, 2, 3];
    x.reverse().sort((a, b) => {
      return a - b;
    });
  });
});

Тестирование типов Экспериментально

Вы можете писать тесты для выявления регрессий типов. Vitest поставляется с пакетом expect-type, который предоставляет аналогичный и простой для понимания API.

import { assertType, expectTypeOf, test } from 'vitest';
import { mount } from './mount.js';

test('my types work properly', () => {
  expectTypeOf(mount).toBeFunction();
  expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>();

  // @ts-expect-error name is a string
  assertType(mount({ name: 42 }));
});

Шардинг

Запускайте тесты на разных машинах, используя флаги --shard и --reporter=blob. Все результаты тестов и покрытия могут быть объединены в конце вашего CI-конвейера с помощью команды --merge-reports:

vitest --shard=1/2 --reporter=blob
vitest --shard=2/2 --reporter=blob
vitest --merge-reports --reporter=junit --coverage.reporter=text

Дополнительную информацию см. в разделе Улучшение производительности | Шардинг.

Переменные окружения

Vitest автоматически загружает переменные окружения, начинающиеся с VITE_, из файлов .env, чтобы поддерживать совместимость с тестами, связанными с фронтендом, следуя установленной конвенции Vite. Тем не менее, чтобы загрузить все переменные окружения из файлов .env, вы можете использовать метод loadEnv, импортированный из vite:

import { loadEnv } from 'vite';
import { defineConfig } from 'vitest/config';

export default defineConfig(({ mode }) => ({
  test: {
    // mode определяет, какой файл ".env.{mode}" выбрать, если он существует
    env: loadEnv(mode, process.cwd(), ''),
  },
}));