Pierwsze kroki

Przegląd

Vitest (wymawiane jako "wi-test") to framework testowy nowej generacji, działający na Vite.

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

Wypróbowanie Vitest Online

Możesz wypróbować Vitest online na StackBlitz. Uruchamia Vitest bezpośrednio w przeglądarce i jest niemal identyczny z lokalną konfiguracją, ale nie wymaga instalacji niczego na Twoim komputerze.

Dodawanie Vitest do Twojego projektu

Dowiedz się, jak zainstalować, oglądając wideo

npmyarnpnpmbun

bash

npm install -D vitest

bash

yarn add -D vitest

bash

pnpm add -D vitest

bash

bun add -D vitest

TIP

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

Zaleca się zainstalowanie vitest w pliku package.json przy użyciu jednej z wymienionych powyżej metod. 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 $PATH systemu i wykona je, jeśli zostanie znalezione. Jeśli polecenie nie zostanie znalezione w żadnej z tych lokalizacji, npx zainstaluje je w tymczasowej lokalizacji przed wykonaniem.

Pisanie testów

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

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

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 testy muszą zawierać .test. lub .spec. w nazwie pliku.

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

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ść:

txt

✓ 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 jest obecny, vitest odczyta Twój główny vite.config.ts, aby dopasować wtyczki i konfigurację do Twojej aplikacji Vite. Na przykład, Twoja konfiguracja Vite resolve.alias i plugins będzie działać bez dodatkowej konfiguracji. 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 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 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 procesie 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ć odniesienie 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 następnej dużej aktualizacji, ale możesz zacząć migrować do vitest/config w Vitest 2.1:

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

export default defineConfig({
  test: {
    // ... Tutaj określ opcje.
  },
});

Zobacz listę opcji konfiguracyjnych w Referencjach konfiguracji

WARNING

Jeśli zdecydujesz się na dwa oddzielne pliki konfiguracyjne dla Vite i Vitest, upewnij się, że zdefiniowałeś te same opcje Vite w pliku konfiguracyjnym Vitest, ponieważ nadpisze on Twój plik Vite, a nie go uzupełni. Możesz również użyć metody mergeConfig z wpisów vite lub vitest/config, aby połączyć konfigurację Vite z konfiguracją Vitest:

vitest.config.mjsvite.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config.mjs';

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

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.

Wsparcie dla projektów

Uruchamiaj różne konfiguracje projektów w ramach tego samego projektu za pomocą Projektów testowych. Możesz zdefiniować listę plików i folderów, które definiują Twoje projekty w pliku vitest.config.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // możesz użyć listy wzorców glob do zdefiniowania swoich projektów
      // 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 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 projekcie Vitest utworzonym za pomocą szablonu:

json

{
  "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	Środowisko testowe
`basic`	GitHub	Wypróbuj online
`fastify`	GitHub	Wypróbuj online
`in-source-test`	GitHub	Wypróbuj online
`lit`	GitHub	Wypróbuj online
`vue`	GitHub	Wypróbuj online
`marko`	GitHub	Wypróbuj online
`preact`	GitHub	Wypróbuj online
`react`	GitHub	Wypróbuj online
`solid`	GitHub	Wypróbuj online
`svelte`	GitHub	Wypróbuj online
`sveltekit`	GitHub	Wypróbuj online
`profiling`	GitHub	Niedostępne
`typecheck`	GitHub	Wypróbuj online
`projects`	GitHub	Wypróbuj online

Projekty używające Vitest

Używanie niewydanych commitów

Każdy commit w gałęzi głównej oraz żądanie ściągnięcia (PR) z etykietą cr-tracked są publikowane na pkg.pr.new. Możesz zainstalować ten pakiet, używając polecenia: npm i https://pkg.pr.new/vitest@{commit}.

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

bash

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

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

Społeczność

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

Pierwsze kroki ​

Przegląd ​

Wypróbowanie Vitest Online ​

Dodawanie Vitest do Twojego projektu ​

Pisanie testów ​

Konfiguracja Vitest ​

Wsparcie dla projektów ​

Interfejs wiersza poleceń ​

Automatyczna instalacja zależności ​

Integracje IDE ​

Przykłady ​

Projekty używające Vitest ​

Używanie niewydanych commitów ​

Społeczność ​

Pierwsze kroki

Przegląd

Wypróbowanie Vitest Online

Dodawanie Vitest do Twojego projektu

Pisanie testów

Konfiguracja Vitest

Wsparcie dla projektów

Interfejs wiersza poleceń

Automatyczna instalacja zależności

Integracje IDE

Przykłady

Projekty używające Vitest

Używanie niewydanych commitów

Społeczność