Pierwsze kroki

Omówienie

Vitest (wymawiane jako "wi-test") to framework testowy nowej generacji, oparty na Vite.

Więcej o uzasadnieniu projektu dowiesz się w sekcji Dlaczego Vitest.

Wypróbowanie Vitest Online

Możesz przetestować Vitest online na StackBlitz. Uruchamia Vitest bezpośrednio w przeglądarce i jest niemal identyczny z lokalną konfiguracją, nie wymagając instalacji niczego na Twoim komputerze.

Dodawanie Vitest do Twojego projektu

Poznaj sposób instalacji, oglądając wideo

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest wymaga Vite w wersji >=v5.0.0 i Node.js w wersji >=v18.0.0.

Zaleca się zainstalowanie pakietu vitest w pliku package.json przy użyciu jednej z metod wymienionych powyżej. Jeśli jednak wolisz uruchomić vitest bezpośrednio, możesz użyć npx vitest (narzędzie npx jest dołączone do npm i Node.js).

Narzędzie npx wykona podane polecenie. Domyślnie npx najpierw sprawdzi, czy polecenie istnieje w plikach binarnych lokalnego projektu. Jeśli nie zostanie tam znalezione, npx poszuka w systemowym $PATH i wykona je, jeśli zostanie znalezione. Jeśli polecenie nie zostanie znalezione w żadnej z tych lokalizacji, npx zainstaluje je tymczasowo przed wykonaniem.

Pisanie testów

Jako przykład napiszemy prosty test, który sprawdza działanie 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.js';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

TIP

Domyślnie pliki testowe muszą zawierać ".test." lub ".spec." w swojej nazwie.

Następnie, aby wykonać test, dodaj następującą sekcję do pliku 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ący komunikat:

✓ 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

Jeśli używasz Bun jako menedżera pakietów, upewnij się, że używasz polecenia bun run test zamiast bun test, w przeciwnym razie Bun uruchomi swój własny runner testów.

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

Konfiguracja Vitest

Jedną z głównych zalet Vitest jest jego ujednolicona konfiguracja z Vite. Jeśli istnieje, vitest odczyta Twój główny plik vite.config.ts, aby dopasować wtyczki i konfigurację do Twojej aplikacji Vite. Na przykład, Twoje konfiguracje Vite resolve.alias i plugins będą działać natychmiast. Jeśli chcesz inną konfigurację 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 obiektu 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 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 pliku konfiguracyjnym:

import { defineConfig } from 'vitest/config';

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

TIP

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

Jeśli już używasz Vite, dodaj właściwość test do swojej konfiguracji Vite. Będziesz również musiał dodać odwołanie do typów Vitest za pomocą dyrektywy potrójnego ukośnika na początku pliku konfiguracyjnego.

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

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

<reference types="vitest" /> przestanie działać w Vitest 3, ale możesz zacząć migrację do vitest/config w Vitest 2.1:

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

export default defineConfig({
  test: {
    // ... Określ opcje w tym miejscu.
  },
});

Zobacz listę opcji konfiguracyjnych w Dokumentacji Konfiguracji

WARNING

Jeśli zdecydujesz się mieć dwa oddzielne pliki konfiguracyjne dla Vite i Vitest, upewnij się, że zdefiniowałeś te same opcje Vite w pliku konfiguracyjnym Vitest, ponieważ konfiguracja Vitest nadpisze konfigurację Vite, zamiast ją rozszerzać. Możesz również użyć metody mergeConfig z vite lub vitest/config, aby połączyć 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()],
});

Zalecamy jednak 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 projektu w ramach tego samego projektu za pomocą Vitest Workspaces. Możesz zdefiniować listę plików i folderów, które składają się na Twój obszar roboczy w pliku vitest.workspace. Plik obsługuje rozszerzenia js/ts/json. Ta funkcja świetnie sprawdza się w konfiguracjach monorepo.

import { defineWorkspace } from 'vitest/config'; // Poprawiono import

export default defineWorkspace([
  // Możesz użyć listy wzorców glob do zdefiniowania swoich obszarów roboczych.
  // Vitest oczekuje listy plików konfiguracyjnych
  // lub katalogów zawierających plik konfiguracyjny.
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // Możesz nawet uruchomić 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ć binarnego vitest w swoich skryptach npm lub uruchomić go bezpośrednio za pomocą npx vitest. Oto domyślne skrypty npm w nowo utworzonym projekcie Vitest:

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

Aby uruchomić testy raz 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 swoim projekcie.

Dowiedz się więcej o Interfejsie wiersza poleceń

Automatyczna instalacja zależności

Vitest poprosi Cię o zainstalowanie niektórych zależności, jeśli nie są jeszcze zainstalowane. Możesz wyłączyć to zachowanie, ustawiając zmienną środowiskową VITEST_SKIP_INSTALL_CHECKS=1.

Integracje IDE

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

Zainstaluj z VS Code Marketplace

Dowiedz się więcej o Integracjach IDE

Przykłady

Przykład	Źródło	Playground
basic	GitHub	Uruchom online
fastify	GitHub	Uruchom online
in-source-test	GitHub	Uruchom online
lit	GitHub	Uruchom online
vue	GitHub	Uruchom online
marko	GitHub	Uruchom online
preact	GitHub	Uruchom online
react	GitHub	Uruchom online
solid	GitHub	Uruchom online
svelte	GitHub	Uruchom online
sveltekit	GitHub	Uruchom online
profiling	GitHub	Brak
typecheck	GitHub	Uruchom online
workspace	GitHub	Uruchom online

Projekty wykorzystują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

Każdy commit w gałęzi głównej oraz Pull Requesty z etykietą cr-tracked są publikowane na pkg.pr.new. Możesz je zainstalować, używając npm i https://pkg.pr.new/vitest@{commit}.

Jeśli chcesz przetestować własną modyfikację lokalnie, możesz ją zbudować i samodzielnie utworzyć link symboliczny (wymagane jest pnpm):

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # możesz użyć preferowanego menedżera pakietów do tego kroku

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 globalnego utworzenia linku symbolicznego dla vitest).

Społeczność

Jeśli masz pytania lub potrzebujesz pomocy, skontaktuj się ze społecznością na Discordzie i dyskusjach GitHub.