Első lépések

Áttekintés

A Vitest egy rendkívül gyors egységteszt keretrendszer, amely a Vite-re épül.

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

TIP

A Vitest használatához legalább Vite v3.0.0 és Node v14.18 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);
});

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

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