Začínáme

Přehled

Vitest je extrémně rychlý framework pro unit testy, který využívá 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

TIP

Vitest vyžaduje Vite >=v3.0.0 a Node >=v14.18

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

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

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