Wprowadzenie

Przegląd

Vitest to błyskawicznie szybki framework do testów jednostkowych 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

TIP

Vitest wymaga Vite >=v3.0.0 i Node >=v14.18

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);
});

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 (transform 23ms, setup 0ms, collect 16ms, tests 2ms, environment 0ms, prepare 106ms)

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	Przetestuj online
fastify	GitHub	Przetestuj online
graphql	GitHub	Przetestuj online
image-snapshot	GitHub	Przetestuj online
lit	GitHub	Przetestuj online
mocks	GitHub	Przetestuj online
nextjs	GitHub	Przetestuj online
playwright	GitHub
puppeteer	GitHub
react-enzyme	GitHub	Przetestuj online
react-mui	GitHub	Przetestuj online
react-storybook	GitHub	Przetestuj online
react-testing-lib-msw	GitHub	Przetestuj online
react-testing-lib	GitHub	Przetestuj online
react	GitHub	Przetestuj online
ruby	GitHub	Przetestuj online
solid	GitHub	Przetestuj online
svelte	GitHub	Przetestuj online
vitesse	GitHub	Przetestuj online
vue-jsx	GitHub	Przetestuj online
vue	GitHub	Przetestuj online
vue2	GitHub	Przetestuj 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.