Začínáme

Přehled

Vitest je testovací framework nové generace poháněný nástrojem Vite.

Více informací o důvodech vzniku tohoto projektu naleznete v sekci Proč Vitest.

Vyzkoušení Vitestu online

Vitest si můžete snadno vyzkoušet online na StackBlitzu. Spouští se přímo v prohlížeči a chová se téměř identicky s lokální instalací, ale nevyžaduje žádnou instalaci na vašem počítači.

Přidání Vitestu do projektu

Instalace pomocí video tutoriálu

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

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

Doporučujeme nainstalovat vitest do vašeho package.json pomocí jednoho z výše uvedených příkazů. Pokud preferujete spouštění vitest přímo, můžete použít npx vitest (příkaz npx je součástí npm a Node.js).

Příkaz npx spustí příkaz buď z lokálního node_modules/.bin, nebo nainstaluje potřebné balíčky pro jeho spuštění. Ve výchozím nastavení npx zkontroluje, zda příkaz existuje v $PATH nebo v lokálních binárkách projektu, a pokud ano, spustí jej. Pokud příkaz nebyl nalezen, bude před spuštěním nainstalován.

Psaní testů

Jako příklad si ukážeme jednoduchý test, který ověří výstup funkce pro sčítání dvou čísel.

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

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

test('1 + 2 se rovná 3', () => {
  expect(sum(1, 2)).toBe(3);
});

TIP

Ve výchozím nastavení musí názvy souborů s testy obsahovat ".test." nebo ".spec.".

Pro spuštění testu přidejte následující sekci do package.json:

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

Nyní spusťte npm run test, yarn test nebo pnpm test (podle vašeho správce balíčků) a Vitest vypíše následující 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

Více informací o používání Vitestu naleznete v sekci API.

Konfigurace Vitestu

Jednou z hlavních výhod Vitestu je jednotná konfigurace s Vitem. Pokud existuje vite.config.ts v kořenovém adresáři projektu, vitest jej automaticky načte a použije stejné pluginy a nastavení jako aplikace Vite. Například konfigurace Vite pro resolve.alias a plugins bude fungovat automaticky. Pokud chcete pro testování použít jinou konfiguraci, máte následující možnosti:

• Vytvořit soubor 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 v defineConfig (bude nastavena na test, pokud ji nepřebijete) pro podmíněné použití jiné konfigurace v vite.config.ts.

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

Pokud nepoužíváte Vite jako 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ž Vite nepoužíváte, Vitest se na něj silně spoléhá pro transformaci kódu. Proto můžete konfigurovat jakoukoli vlastnost popsanou v dokumentaci Vite.

Pokud již Vite používáte, přidejte vlastnost test do vaší konfigurace Vite. Budete také muset přidat odkaz na typy z Vitestu pomocí triple slash directive v horní části konfiguračního souboru.

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

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

Seznam všech možností konfigurace naleznete v Referenci konfigurace

WARNING

Pokud se rozhodnete mít dva oddělené konfigurační soubory pro Vite a Vitest, ujistěte se, že definujete stejné možnosti Vite i v konfiguračním souboru Vitest, protože ten přepíše konfiguraci Vite, místo aby ji 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 Workspaces (Pracovních prostorů)

Spouštějte různé konfigurace projektů uvnitř stejného projektu pomocí Vitest Workspaces. Můžete definovat seznam souborů a složek, které definují pracovní prostor v souboru vitest.workspace. Soubor podporuje přípony js/ts/json. Tato funkce je velmi užitečná pro monorepo nastavení.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // můžete použít seznam glob vzorů pro definování vašich pracovních prostorů
  // Vitest očekává seznam konfiguračních souborů
  // nebo adresářů, kde se nachází 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 "vitest" procesu
  {
    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'],
    },
  },
]);

Command Line Interface (Rozhraní příkazové řádky)

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

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

Pro jednorázové spuštění testů bez sledování změn v souborech použijte vitest run. Můžete zadat další možnosti CLI, jako například --port nebo --https. Pro úplný seznam možností CLI spusťte ve vašem projektu npx vitest --help.

Více informací o Command Line Interface

IDE Integrations (Integrace s IDE)

Poskytujeme oficiální rozšíření pro Visual Studio Code pro vylepšení testování s Vitestem.

Instalace z VS Code Marketplace

Více informací o IDE Integrations

Příklady

Příklad	Zdroj	Playground
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 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žití nevydaných commitů

Pokud chcete otestovat nejnovější funkce dříve, než vyjde nová verze, naklonujte si vitest repo na svůj lokální počítač a sestavte a propojte si jej sami (pnpm je vyžadován):

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 svého oblíbeného správce balíčků

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

Komunita

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