Začínáme

Přehled

Vitest (čte se jako "vítest") je testovací framework nové generace, poháněný nástrojem Vite.

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

Online vyzkoušení Vitest

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 žádnou instalaci 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 jako vývojovou závislost ve vašem package.json pomocí jedné z výše uvedených metod. Pokud však chcete spustit vitest přímo, můžete použít npx vitest (nástroj npx je součástí npm a Node.js).

Nástroj npx vykoná 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 systémové proměnné $PATH a vykoná ho, pokud je nalezen. Pokud příkaz není nalezen ani na jednom z těchto míst, npx ho před spuštěním dočasně nainstaluje do dočasného umístění.

Psaní testů

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

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

// sum.test.js
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 zobrazí 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 používáte příkaz bun run test místo bun test, jinak Bun spustí svůj vlastní testovací běžec.

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

Konfigurace Vitest

Jednou z hlavních výhod Vitest je jeho sjednocená konfigurace s Vite. Pokud existuje, vitest přečte váš kořenový vite.config.ts, aby použil stejné pluginy a nastavení jako vaše Vite aplikace. Například vaše konfigurace Vite resolve.alias a plugins budou fungovat automaticky. Pokud chcete jinou konfiguraci během testování, můžete:

• Vytvořit vitest.config.ts, který bude mít vyšší prioritu.
• Předat volbu CLI --config, např. vitest --config ./path/to/vitest.config.ts.
• Použít process.env.VITEST nebo vlastnost mode v defineConfig (bude nastavena na test, pokud není přepsána) pro podmíněnou aplikaci jiné 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 buildovací nástroj, 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 na něm silně závisí pro svůj transformační proces. 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 své Vite konfigurace. Budete také muset přidat odkaz na typy Vitest pomocí triple slash direktivy na začátek konfiguračního souboru.

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

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

<reference types="vitest" /> přestane fungovat ve Vitest 3, 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 konfiguračních možností naleznete v Konfigurační referenci

WARNING

Pokud se rozhodnete mít dva samostatné konfigurační soubory pro Vite a Vitest, ujistěte se, že definujete stejné možnosti Vite ve vašem konfiguračním souboru Vitest, protože ten 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 pracovních prostorů

Spouštějte různé konfigurace projektu uvnitř stejného projektu s Vitest Workspaces. Seznam souborů a složek, které definují váš pracovní prostor, můžete určit v souboru vitest.workspace. Soubor podporuje koncovky js/ts/json. Tato funkce skvěle funguje v monorepo projektech.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // můžete použít seznam globálních vzorů k definování vašich pracovních prostorů
  // Vitest vyžaduje seznam konfiguračních souborů
  // nebo adresářů, kde je 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 svých npm skriptech, nebo jej spustit přímo pomocí npx vitest. Zde jsou výchozí npm skripty v nově vytvořeném projektu Vitest:

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

Pro jednorázové spuštění testů bez sledování změn souborů použijte vitest run. Můžete zadat další možnosti CLI, jako je --port nebo --https. Úplný seznam možností CLI získáte spuštěním 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 nejsou dosud nainstalovány. Toto chování můžete vypnout nastavením proměnné prostředí VITEST_SKIP_INSTALL_CHECKS=1.

Integrace IDE

Také nabízíme oficiální rozšíření pro Visual Studio Code, které zlepší vaše testování s Vitest.

Nainstalovat z VS Code Marketplace

Více o Integracích IDE

Příklady

Příklad	Zdroj	Testovací prostředí
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
workspace	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 označením cr-tracked se publikují na pkg.pr.new. Můžete je nainstalovat příkazem npm i https://pkg.pr.new/vitest@{commit}.

Pokud chcete otestovat vlastní úpravu lokálně, můžete ji sami sestavit a propojit (pnpm je nutný):

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 vašeho preferované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ým jste vitest globálně propojili).

Komunita

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