Első lépések

Áttekintés

A Vitest (ejtsd: "vítest") egy következő generációs tesztelési keretrendszer, amelyet a Vite hajt.

A projekt mögötti indokokról többet megtudhat a Miért Vitest szakaszban.

Vitest kipróbálása online

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

Vitest hozzáadása a projekthez

Videó a telepítésről

npmyarnpnpmbun

bash

npm install -D vitest

bash

yarn add -D vitest

bash

pnpm add -D vitest

bash

bun add -D vitest

TIP

A Vitesthez Vite >=v5.0.0 és Node >=v18.0.0 szükséges.

Ajánlott a vitest egy példányát telepíteni a package.json fájlba a fent felsorolt módszerek egyikével. Azonban, ha inkább közvetlenül szeretné futtatni a vitest-et, használhatja az npx vitest parancsot (az npx eszköz az npm és a Node.js része).

Az npx eszköz a megadott parancsot hajtja végre. Alapértelmezés szerint az npx először ellenőrzi, hogy a parancs létezik-e a helyi projekt binárisai között. Ha ott nem található, az npx a rendszer $PATH útvonalában keresi, és ha megtalálja, végrehajtja. Ha a parancs egyik helyen sem található, az npx ideiglenes helyre telepíti a végrehajtás előtt.

Tesztek írása

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

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

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

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

TIP

Alapértelmezés szerint a tesztfájlok nevében szerepelnie kell a .test. vagy .spec. kifejezésnek.

Ezután a teszt futtatásához adja hozzá a következő szakaszt a package.json fájlhoz:

json

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

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

txt

✓ 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

Ha Bun-t használ csomagkezelőként, győződjön meg róla, hogy a bun run test parancsot használja a bun test helyett, különben a Bun a saját tesztfuttatóját fogja használni.

További információ a Vitest használatáról az API szakaszban.

Vitest konfigurálása

A Vitest egyik fő előnye a Vite-tel való egységes konfigurálhatósága. Ha van, a vitest beolvassa a gyökér vite.config.ts fájlt, hogy illeszkedjen a Vite alkalmazás beépülő moduljaihoz és beállításaihoz. Például a Vite resolve.alias és plugins konfigurációja azonnal működni fog. Ha eltérő konfigurációt szeretne a teszteléshez, akkor:

Hozzon létre vitest.config.ts fájlt, amelynek magasabb prioritása lesz.
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-en (ha nincs felülírva, test értékre lesz állítva), hogy feltételesen alkalmazzon eltérő konfigurációt a vite.config.ts fájlban.

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

Ha nem a Vite-et használja build eszközként, a Vitestet a test tulajdonság segítségével konfigurálhatja a konfigurációs fájlban:

import { defineConfig } from 'vitest/config';

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

TIP

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

Ha már használja a Vite-et, adja hozzá a test tulajdonságot a Vite konfigurációjához. Szüksége lesz egy hivatkozásra a Vitest típusokra is egy három perjel direktíva segítségével a konfigurációs fájl tetején.

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

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

A <reference types="vitest" /> a következő fő frissítésben már nem fog működni, de a Vitest 2.1-ben elkezdheti a vitest/config-ra való átállást:

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

export default defineConfig({
  test: {
    // ... Itt adja meg az opciókat.
  },
});

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 róla, hogy ugyanazokat a Vite opciókat definiálja a Vitest konfigurációs fájljában, mivel az felülírja a Vite fájlt, nem pedig kiterjeszti. Használhatja a mergeConfig metódust is a vite vagy vitest/config bejegyzésekből a Vite és Vitest konfigurációjának egyesítéséhez:

vitest.config.mjsvite.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config.mjs';

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

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue()],
});

Azonban azt javasoljuk, hogy ugyanazt a fájlt használja mind a Vite, mind a Vitest számára, ahelyett, hogy két külön fájlt hozna létre.

Projektek támogatása

Futtasson különböző projektkonfigurációkat ugyanazon a projekten belül a Tesztprojektek segítségével. A vitest.config fájlban definiálhatja a projekteket meghatározó fájlok és mappák listáját.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // glob minták listáját használhatja a projektek definiálásához
      // A Vitest konfigurációs fájlok listáját várja
      // vagy olyan könyvtárakat, ahol van konfigurációs fájl
      'packages/*',
      'tests/*/vitest.config.{e2e,unit}.ts',
      // akár ugyanazokat a teszteket is futtathatja,
      // de különböző konfigurációkkal ugyanabban a "vitest" folyamatban
      {
        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árist az npm szkriptekben, vagy közvetlenül futtathatja az npx vitest paranccsal. Íme a Vitest projekt alapértelmezett npm szkriptjei:

json

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

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

Tudjon meg többet a Parancssori felület részben.

Automatikus függőségtelepítés

A Vitest felajánlja bizonyos függőségek telepítését, ha azok még nincsenek telepítve. Ezt a viselkedést letilthatja a VITEST_SKIP_INSTALL_CHECKS=1 környezeti változó beállításával.

IDE integrációk

Hivatalos bővítményt is kínálunk a Visual Studio Code-hoz, hogy javítsa a Vitesttel való tesztelési élményét.

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

Tudjon meg többet az IDE integrációk részben.

Példák

Példa	Forrás	Játszótér
`basic`	GitHub	Online kipróbálás
`fastify`	GitHub	Online kipróbálás
`in-source-test`	GitHub	Online kipróbálás
`lit`	GitHub	Online kipróbálás
`vue`	GitHub	Online kipróbálás
`marko`	GitHub	Online kipróbálás
`preact`	GitHub	Online kipróbálás
`react`	GitHub	Online kipróbálás
`solid`	GitHub	Online kipróbálás
`svelte`	GitHub	Online kipróbálás
`sveltekit`	GitHub	Online kipróbálás
`profiling`	GitHub	Nem elérhető
`typecheck`	GitHub	Online kipróbálás
`projects`	GitHub	Online kipróbálás

Vitestet használó projektek

Nem kiadott commitok használata

A fő ágon lévő minden commit és a cr-tracked címkével ellátott PR közzétételre kerül a pkg.pr.new oldalon. Az npm i https://pkg.pr.new/vitest@{commit} paranccsal telepítheti.

Ha saját módosításait szeretné helyben tesztelni, saját maga is elkészítheti és linkelheti (a pnpm szükséges):

bash

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # ehhez a lépéshez 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, amelyet a vitest globális linkeléséhez használt).

Közösség

Ha kérdései vannak, vagy segítségre van szüksége, forduljon a közösséghez a Discord és a GitHub Discussions oldalain.

Első lépések ​

Áttekintés ​

Vitest kipróbálása online ​

Vitest hozzáadása a projekthez ​

Tesztek írása ​

Vitest konfigurálása ​

Projektek támogatása ​

Parancssori felület ​

Automatikus függőségtelepítés ​

IDE integrációk ​

Példák ​

Vitestet használó projektek ​

Nem kiadott commitok használata ​

Közösség ​

Első lépések

Áttekintés

Vitest kipróbálása online

Vitest hozzáadása a projekthez

Tesztek írása

Vitest konfigurálása

Projektek támogatása

Parancssori felület

Automatikus függőségtelepítés

IDE integrációk

Példák

Vitestet használó projektek

Nem kiadott commitok használata

Közösség