Első lépések

Áttekintés

A Vitest egy új generációs tesztelő keretrendszer, melyet a Vite hajt.

A projekt hátteréről bővebben a Miért érdemes a Vitestet használni részben olvashat.

Vitest kipróbálása online

A Vitestet online is kipróbálhatja a StackBlitz oldalon. A Vitest közvetlenül a böngészőben futtatható, és szinte teljesen megegyezik a helyi beállítással, de nem igényel semmilyen telepítést a számítógépén.

Vitest hozzáadása a projekthez

Videó útmutató a telepítéshez

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

A Vitest 1.0 használatához legalább Vite v5.0.0 és Node v18.0.0 vagy újabb verzió szükséges.

Javasoljuk, hogy telepítsen egy vitest példányt a package.json fájlba a fent felsorolt módszerek egyikével. Ha azonban inkább közvetlenül szeretné futtatni a vitest parancsot, használhatja az npx vitest parancsot (az npx parancs az npm és a Node.js része).

Az npx parancs a parancsot a helyi node_modules/.bin könyvtárból futtatja, telepítve a parancs futtatásához szükséges csomagokat. Az npx alapértelmezés szerint ellenőrzi, hogy a parancs létezik-e a $PATH környezeti változóban, vagy a helyi projekt bináris fájljai között, és ha megtalálja, futtatja. Ha a parancs nem található, a végrehajtás előtt telepíti azt.

Tesztek írása

Példaként írunk egy egyszerű tesztet, amely ellenőrzi két számot összeadó függvény kimenetét.

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

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

test('adds 1 + 2 to equal 3', () => {
  // Ellenőrzi, hogy 1 + 2 = 3
  expect(sum(1, 2)).toBe(3);
});

TIP

Alapértelmezés szerint a tesztek fájlnevének tartalmaznia kell a ".test." vagy a ".spec." szöveget.

Ezután a teszt végrehajtásához adja hozzá a következő részt a package.json fájlhoz:

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

Végül futtassa az npm run test, yarn test vagy pnpm test parancsot, a csomagkezelőtől függően, és a Vitest a következő üzenetet írja ki:

✓ 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

Ha többet szeretne megtudni a Vitest használatáról, tekintse meg az API részt.

A Vitest konfigurálása

A Vitest egyik fő előnye a Vite-tel való egységes konfigurációja. Ha elérhető, a vitest beolvassa a gyökérkönyvtárban található vite.config.ts fájlt, hogy a beépülő modulok és beállítások megegyezzenek a Vite alkalmazáséval. Például a Vite resolve.alias és plugins konfigurációja azonnal működni fog. Ha tesztelés során eltérő konfigurációt szeretne, a következő lehetőségei vannak:

• Hozzon létre egy vitest.config.ts fájlt, amely magasabb prioritással rendelkezik.
• Adja át a --config opciót a CLI-nek, pl. vitest --config ./path/to/vitest.config.ts.
• Használja a process.env.VITEST vagy a mode tulajdonságot a defineConfig fájlon (ha nincs felülírva, test értékre lesz állítva), hogy feltételesen alkalmazzon különböző konfigurációt a vite.config.ts fájlban.

A Vitest ugyanazokat a kiterjesztéseket támogatja a konfigurációs fájlhoz, hasonlóan a Vite-hez: .js, .mjs, .cjs, .ts, .cts, .mts. A Vitest nem támogatja a .json kiterjesztést.

Ha nem használja a Vite-et build eszközként, a Vitestet a konfigurációs fájl test tulajdonságával konfigurálhatja:

import { defineConfig } from 'vitest/config';

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

TIP

Még ha nem is használja a Vite-et, a Vitest nagymértékben támaszkodik rá az átalakítási folyamat során. Ezért bármely, a Vite dokumentációban leírt tulajdonságot is konfigurálhat.

Ha már használja a Vite-et, adja hozzá a test tulajdonságot a Vite konfigurációjához. Ezenkívül hozzá kell adnia egy hivatkozást a Vitest típusaira egy hármas perjel direktívával a konfigurációs fájl tetején.

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

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

Tekintse meg a konfigurációs opciók listáját a Konfigurációs referencia részben.

WARNING

Ha úgy dönt, hogy két külön konfigurációs fájlt használ a Vite és a Vitest számára, győződjön meg arról, hogy ugyanazokat a Vite opciókat definiálja a Vitest konfigurációs fájlban, mivel az felülírja a Vite fájlt, nem pedig kiterjeszti azt. A Vite és Vitest konfigurációk egyesítéséhez használhatja a mergeConfig metódust a vite vagy a vitest/config csomagból:

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()],
});

Javasoljuk azonban, hogy a Vite és Vitest számára ugyanazt a konfigurációs fájlt használja két külön fájl létrehozása helyett.

Munkaterületek támogatása

Különböző projektkonfigurációk futtatása ugyanazon a projekten belül a Vitest munkaterületekkel lehetséges. Meghatározhat egy listát a fájlokról és mappákról, amelyek meghatározzák a munkaterületet a vitest.workspace fájlban. A fájl js, ts és json kiterjesztésű lehet. Ez a funkció nagyszerűen működik a monorepo beállításoknál.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // A munkaterületek meghatározásához használhat glob mintákat
  // A Vitest konfigurációs fájlokat vár
  // vagy olyan könyvtárakat, amelyekben konfigurációs fájl található
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // akár ugyanazokat a teszteket is futtathatja,
  // de ugyanabban a "vitest" folyamatban, eltérő konfigurációkkal
  {
    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'],
    },
  },
]);

Parancssori felület

Egy olyan projektben, ahol a Vitest telepítve van, használhatja a vitest bináris fájlt az npm szkriptjeiben, vagy közvetlenül futtathatja az npx vitest paranccsal. Íme az alapértelmezett npm szkriptek egy Vitest projekthez:

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

A tesztek egyszeri futtatásához a fájlváltozások figyelése nélkül használja a vitest run parancsot. Megadhat további CLI opciókat, például --port vagy --https. A CLI opciók teljes listájához futtassa az npx vitest --help parancsot a projektben.

További információ a Parancssori felületről

IDE integrációk

A Visual Studio Code-hoz hivatalos bővítményt is kínálunk, amely javítja a Vitesttel való tesztelés élményét.

Telepítés a VS Code Marketplace-ről

További információ az IDE integrációkról

Példák

Példa	Forrás	Kipróbálás
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

A Vitestet használó projektek

• 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

Fejlesztői verzió használata

Ha nem tud várni egy új kiadásra a legújabb funkciók teszteléséhez, klónoznia kell a vitest repót a helyi gépére, majd le kell fordítania és létre kell hoznia a kapcsolatot (pnpm szükséges):

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # Ezen a lépésen használhatja a preferált csomagkezelőjét

Ezután lépjen abba a projektbe, ahol a Vitestet használja, és futtassa a pnpm link --global vitest parancsot (vagy azt a csomagkezelőt, amellyel a vitest-et globálisan összekapcsolta).

Közösség

Ha kérdése van, vagy segítségre van szüksége, keresse fel a közösséget a Discord és a GitHub Discussions oldalon.