Wprowadzenie

Przegląd

Vitest to framework testowy nowej generacji oparty na Vite.

Więcej o założeniach projektowych dowiesz się w sekcji Dlaczego Vitest.

Wypróbuj Vitest Online

Możesz wypróbować Vitest online na StackBlitz. Uruchamia Vitest bezpośrednio w przeglądarce i działa niemal identycznie jak lokalna konfiguracja, ale nie wymaga instalowania niczego na Twoim komputerze.

Dodawanie Vitest do Twojego Projektu

Dowiedz się, jak zainstalować z pomocą filmu instruktażowego

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest 1.0 wymaga Vite >=v5.0.0 i Node >=v18.0.0

Zaleca się zainstalowanie vitest w package.json za pomocą jednej z metod wymienionych powyżej. Jeśli jednak wolisz uruchomić vitest bezpośrednio, możesz użyć npx vitest (polecenie npx jest częścią npm i Node.js).

Polecenie npx wykona polecenie z lokalnego node_modules/.bin, instalując wszystkie pakiety potrzebne do jego uruchomienia. Domyślnie npx sprawdzi, czy polecenie istnieje w $PATH lub w lokalnych plikach binarnych projektu, i je wykona. Jeśli polecenie nie zostanie znalezione, zostanie zainstalowane przed wykonaniem.

Pisanie Testów

Jako przykład napiszemy prosty test, który weryfikuje wynik funkcji dodającej dwie liczby.

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

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

test('dodaje 1 + 2 i oczekuje 3', () => {
  expect(sum(1, 2)).toBe(3);
});

TIP

Domyślnie nazwy plików testów muszą zawierać ".test." lub ".spec.".

Następnie, aby uruchomić test, dodaj następującą sekcję do Twojego package.json:

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

Na koniec uruchom npm run test, yarn test lub pnpm test, w zależności od używanego menedżera pakietów, a Vitest wyświetli następującą wiadomość:

✓ 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

Dowiedz się więcej o używaniu Vitest, zobacz sekcję API.

Konfigurowanie Vitest

Jedną z głównych zalet Vitest jest ujednolicona konfiguracja z Vite. Jeśli jest obecny, vitest odczyta Twój główny vite.config.ts, aby dopasować się do wtyczek i konfiguracji Twojej aplikacji Vite. Na przykład, Twoje konfiguracje Vite resolve.alias i plugins będą działać od razu. Jeśli potrzebujesz innej konfiguracji podczas testowania, możesz:

• Utworzyć vitest.config.ts, który będzie miał wyższy priorytet
• Przekazać opcję --config do CLI, np. vitest --config ./path/to/vitest.config.ts
• Użyć process.env.VITEST lub właściwości mode w defineConfig (zostanie ustawiona na test, jeśli nie zostanie nadpisana), aby warunkowo zastosować inną konfigurację w vite.config.ts

Vitest obsługuje te same rozszerzenia dla Twojego pliku konfiguracyjnego co Vite: .js, .mjs, .cjs, .ts, .cts, .mts. Vitest nie obsługuje rozszerzenia .json.

Jeśli nie używasz Vite jako narzędzia do budowania, możesz skonfigurować Vitest za pomocą właściwości test w Twoim pliku konfiguracyjnym:

import { defineConfig } from 'vitest/config';

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

TIP

Nawet jeśli nie używasz Vite, Vitest w dużym stopniu polega na nim w procesie transformacji. Z tego powodu możesz również skonfigurować dowolną właściwość opisaną w dokumentacji Vite.

Jeśli korzystasz z Vite, dodaj właściwość test w Twojej konfiguracji Vite. Będziesz także musiał dodać odniesienie do typów Vitest za pomocą dyrektywy trzech ukośników na górze Twojego pliku konfiguracyjnego.

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

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

Zobacz listę opcji konfiguracyjnych w Referencji Konfiguracji

WARNING

Jeśli masz dwa oddzielne pliki konfiguracyjne dla Vite i Vitest, upewnij się, że zdefiniujesz te same opcje Vite w Twoim pliku konfiguracyjnym Vitest, ponieważ zastąpi on Twój plik Vite, a nie go rozszerzy. Możesz także użyć metody mergeConfig z vite lub vitest/config, aby scalić konfigurację Vite z konfiguracją 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()],
});

Ale zalecamy używanie tego samego pliku zarówno dla Vite, jak i Vitest, zamiast tworzenia dwóch oddzielnych plików.

Obsługa obszarów roboczych

Uruchamiaj różne konfiguracje projektów w ramach tego samego projektu za pomocą Przestrzeni Roboczych Vitest. Możesz zdefiniować listę plików i folderów, które definiują Twoją przestrzeń roboczą w pliku vitest.workspace. Plik obsługuje rozszerzenia js/ts/json. Ta funkcja doskonale sprawdza się w konfiguracjach monorepo.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // możesz użyć listy wzorców glob, aby zdefiniować swoje przestrzenie robocze
  // Vitest oczekuje listy plików konfiguracyjnych
  // lub katalogów, w których znajduje się plik konfiguracyjny
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // możesz nawet uruchamiać te same testy,
  // ale z różnymi konfiguracjami w tym samym procesie "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'],
    },
  },
]);

Interfejs wiersza poleceń

W projekcie, w którym zainstalowano Vitest, możesz użyć pliku binarnego vitest w swoich skryptach npm lub uruchomić go bezpośrednio za pomocą npx vitest. Oto domyślne skrypty npm w projekcie Vitest z rusztowaniem:

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

Aby uruchomić testy jednorazowo, bez obserwowania zmian w plikach, użyj vitest run. Możesz określić dodatkowe opcje CLI, takie jak --port lub --https. Aby uzyskać pełną listę opcji CLI, uruchom npx vitest --help w Twoim projekcie.

Dowiedz się więcej o Interfejsie Linii Poleceń

Integracje IDE

Udostępniliśmy również oficjalne rozszerzenie dla Visual Studio Code, aby poprawić Twoje doświadczenie testowania z Vitest.

Zainstaluj z VS Code Marketplace

Dowiedz się więcej o Integracjach IDE

Przykłady

Przykład	Źródło	Środowisko testowe
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

Projekty używające 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

Używanie Niewydanych Commitów

Jeśli chcesz przetestować najnowsze zmiany przed wydaniem, musisz sklonować repozytorium vitest na swój lokalny komputer, a następnie zbudować i ręcznie je zlinkować (pnpm jest wymagany):

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # you can use your preferred package manager for this step

Następnie przejdź do projektu, w którym używasz Vitest i uruchom pnpm link --global vitest (lub menedżera pakietów, którego użyłeś do połączenia vitest globalnie).

Społeczność

Jeśli masz pytania lub potrzebujesz wsparcia, dołącz do społeczności na Discord i Dyskusjach GitHub.