Začínáme

Přehled

Vitest (vyslovuje se jako "vítest") je testovací framework nové generace, poháněný Vitem.

Více o důvodech vzniku projektu se dozvíte v sekci Proč Vitest.

Vyzkoušení Vitest online

Vitest si můžete vyzkoušet online na StackBlitz. Spouští Vitest přímo v prohlížeči a je téměř identický s lokálním nastavením, ale nevyžaduje instalaci ničeho na váš počítač.

Přidání Vitest do vašeho projektu

Naučte se instalovat pomocí videa

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest vyžaduje Vite >=v5.0.0 a Node >=v18.0.0.

Doporučuje se nainstalovat vitest do vašeho package.json jednou z výše uvedených metod. Pokud byste však raději spustili vitest přímo, můžete použít npx vitest (nástroj npx je dodáván s npm a Node.js).

Nástroj npx provede zadaný příkaz. Ve výchozím nastavení npx nejprve zkontroluje, zda příkaz existuje v lokálních binárních souborech projektu. Pokud tam není nalezen, npx se podívá do $PATH systému a provede jej, pokud je nalezen. Pokud příkaz není nalezen ani na jednom místě, npx jej před spuštěním nainstaluje do dočasného umístění.

Psaní testů

Jako příklad napíšeme jednoduchý test, který ověřuje výstup funkce sčítající dvě čísla.

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

Ve výchozím nastavení musí testy obsahovat .test. nebo .spec. v názvu souboru.

Dále, pro spuštění testu, přidejte následující sekci do vašeho package.json:

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

Nakonec spusťte npm run test, yarn test nebo pnpm test, v závislosti na vašem správci balíčků, a Vitest vypíše tuto zprávu:

✓ 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

Pokud používáte Bun jako správce balíčků, ujistěte se, že spouštíte bun run test namísto bun test, jinak Bun spustí svůj vlastní testovací runner.

Více o použití Vitest se dozvíte v sekci API.

Konfigurace Vitest

Jednou z hlavních výhod Vitestu je jeho jednotná konfigurace s Vite. Pokud je přítomen, vitest přečte váš kořenový vite.config.ts, aby se shodoval s pluginy a nastavením vaší Vite aplikace. Například vaše konfigurace Vite resolve.alias a plugins budou fungovat okamžitě. Pokud chcete jinou konfiguraci během testování, můžete:

• Vytvořit vitest.config.ts, který bude mít vyšší prioritu.
• Předat volbu --config do CLI, např. vitest --config ./path/to/vitest.config.ts.
• Použít process.env.VITEST nebo vlastnost mode na defineConfig (bude nastavena na test, pokud není přepsána) pro podmíněné použití odlišné konfigurace v vite.config.ts.

Vitest podporuje stejné přípony pro váš konfigurační soubor jako Vite: .js, .mjs, .cjs, .ts, .cts, .mts. Vitest nepodporuje příponu .json.

Pokud nepoužíváte Vite jako svůj nástroj pro sestavení, můžete Vitest konfigurovat pomocí vlastnosti test ve vašem konfiguračním souboru:

import { defineConfig } from 'vitest/config';

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

TIP

I když sami Vite nepoužíváte, Vitest se na něj silně spoléhá pro svůj transformační pipeline. Z tohoto důvodu můžete také konfigurovat jakoukoli vlastnost popsanou v dokumentaci Vite.

Pokud již používáte Vite, přidejte vlastnost test do vaší Vite konfigurace. Budete také muset přidat odkaz na typy Vitest pomocí direktivy se třemi lomítky na začátek vašeho konfiguračního souboru.

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

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

<reference types="vitest" /> přestane fungovat v příští velké aktualizaci, ale můžete začít migrovat na vitest/config ve Vitest 2.1:

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

export default defineConfig({
  test: {
    // ... Zde specifikujte možnosti.
  },
});

Seznam možností konfigurace naleznete v Referenci konfigurace

WARNING

Pokud se rozhodnete mít dva samostatné konfigurační soubory pro Vite a Vitest, ujistěte se, že ve vašem konfiguračním souboru Vitest definujete stejné možnosti jako ve Vite, protože přepíše váš soubor Vite, místo aby jej rozšířil. Můžete také použít metodu mergeConfig z vite nebo vitest/config pro sloučení konfigurace Vite s konfigurací 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()],
});

Doporučujeme však používat stejný soubor pro Vite i Vitest, namísto vytváření dvou samostatných souborů.

Podpora projektů

Spouštějte různé konfigurace projektů uvnitř stejného projektu pomocí Testovacích projektů. Seznam souborů a složek, které definují vaše projekty, můžete definovat v souboru vitest.config.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // můžete použít seznam globových vzorů k definování vašich projektů
      // Vitest očekává seznam konfiguračních souborů
      // nebo adresářů obsahujících konfigurační soubor
      'packages/*',
      'tests/*/vitest.config.{e2e,unit}.ts',
      // můžete dokonce spouštět stejné testy,
      // ale s různými konfiguracemi ve stejném procesu 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'],
        },
      },
    ],
  },
});

Rozhraní příkazového řádku

V projektu, kde je Vitest nainstalován, můžete použít binární soubor vitest ve vašich npm skriptech, nebo jej spustit přímo pomocí npx vitest. Zde jsou výchozí npm skripty v základním projektu Vitest:

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

Pro spuštění testů jednou bez sledování změn souborů použijte vitest run. Můžete specifikovat další možnosti CLI, jako --port nebo --https. Pro úplný seznam možností CLI spusťte npx vitest --help ve vašem projektu.

Více o Rozhraní příkazového řádku

Automatická instalace závislostí

Vitest vás vyzve k instalaci určitých závislostí, pokud již nejsou nainstalovány. Toto chování můžete zakázat nastavením proměnné prostředí VITEST_SKIP_INSTALL_CHECKS=1.

Integrace IDE

Poskytujeme také oficiální rozšíření pro Visual Studio Code, které vylepší vaše zkušenosti s testováním s Vitestem.

Nainstalovat z VS Code Marketplace

Více o Integracích IDE

Příklady

Příklad	Zdroj	Playground
basic	GitHub	Hrát online
fastify	GitHub	Hrát online
in-source-test	GitHub	Hrát online
lit	GitHub	Hrát online
vue	GitHub	Hrát online
marko	GitHub	Hrát online
preact	GitHub	Hrát online
react	GitHub	Hrát online
solid	GitHub	Hrát online
svelte	GitHub	Hrát online
sveltekit	GitHub	Hrát online
profiling	GitHub	Není k dispozici
typecheck	GitHub	Hrát online
projects	GitHub	Hrát online

Projekty používající 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

Používání nevydaných commitů

Každý commit na hlavní větvi a PR s nálepkou cr-tracked jsou publikovány na pkg.pr.new. Můžete je nainstalovat příkazem npm i https://pkg.pr.new/vitest@{commit}.

Pokud chcete otestovat vlastní úpravy lokálně, můžete si je sami sestavit a propojit (je vyžadován pnpm):

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # pro tento krok můžete použít vámi preferovaného správce balíčků

Poté přejděte do adresáře projektu, kde používáte Vitest, a spusťte pnpm link --global vitest (nebo správce balíčků, kterého jste použili k globálnímu propojení vitest).

Komunita

Pokud máte dotazy nebo potřebujete pomoc, obraťte se na komunitu na Discordu a GitHub diskusích.