Első lépések

Áttekintés

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

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

Vitest kipróbálása online

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

Vitest hozzáadása a projekthez

Nézze meg a telepítésről szóló videót

npmyarnpnpmbun

bash

npm install -D vitest

bash

yarn add -D vitest

bash

pnpm add -D vitest

bash

bun add -D vitest

TIP

A Vitest használatához 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-mel és a Node.js-szel együtt települ).

Az npx eszköz végrehajtja a megadott parancsot. 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-jában keresi, és ha megtalálja, végrehajtja azt. 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.

// 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

Alapértelmezés szerint a tesztek fájlnevének tartalmaznia kell ".test." vagy ".spec." karakterláncot.

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

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 fogja kiírni:

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 a Bunt használja 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 futtatni.

Tudjon meg többet 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ációja. Ha van ilyen, a vitest beolvassa a gyökér vite.config.ts fájlt, hogy illeszkedjen a beépülő modulokhoz és a Vite alkalmazás beállításaihoz. Például a Vite resolve.alias és plugins konfigurációja problémamentesen működik majd. Ha eltérő konfigurációt szeretne a tesztelés során, akkor:

Hozzon létre egy 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 objektumon (tesztre lesz állítva, ha nincs felülírva), hogy feltételesen alkalmazzon különböző konfigurációt a vite.config.ts fájlban

A Vitest a Vite-hez hasonlóan ugyanazokat a kiterjesztéseket támogatja a konfigurációs fájlokhoz: .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 épít rá az átalakítási folyamatához. 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. Hozzá kell adnia egy hivatkozást a Vitest típusokra is egy három perjel direktíva segítségével a konfigurációs fájl elején.

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

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

A <reference types="vitest" /> a Vitest 3-ban már nem működik, de a Vitest 2.1-ben elkezdheti a vitest/config használatára való áttérést:

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

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

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 azt. Használhatja a mergeConfig metódust is a vite vagy vitest/config modulokból a Vite konfigurációjának és a 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 esetében, ahelyett, hogy két külön fájlt hozna létre.

Munkaterületek támogatása

Futtasson különböző projektkonfigurációkat ugyanazon a projekten belül a Vitest Workspaces használatával. A vitest.workspace fájlban adhatja meg a munkaterületet definiáló fájlok és mappák listáját. A fájl használható js/ts/json kiterjesztésekkel. Ez a funkció kiválóan működik monorepo környezetben.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // glob minták listájával definiálhatja a munkaterületeket
  // A Vitest konfigurációs fájlok listáját igényli
  // vagy olyan könyvtárakat, amelyek tartalmaznak konfigurációs fájlt
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // akár ugyanazokat a teszteket is futtathatja,
  // de különböző konfigurációkkal ugyanazon "vitest" futtatás során
  {
    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

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 az alapértelmezettként létrehozott Vitest projekt npm szkriptjei:

json

{
  "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 a --port vagy a --https. A CLI opciók teljes listájáért futtassa az npx vitest --help parancsot a projektben.

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

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

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

IDE integrációk

Hivatalos kiterjesztést is biztosítunk a Visual Studio Code-hoz, hogy javítsa a tesztelési élményt a Vitesttel.

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	Böngészőben kipróbálható
`basic`	GitHub	Online játék
`fastify`	GitHub	Online játék
`in-source-test`	GitHub	Online játék
`lit`	GitHub	Online játék
`vue`	GitHub	Online játék
`marko`	GitHub	Online játék
`preact`	GitHub	Online játék
`react`	GitHub	Online játék
`solid`	GitHub	Online játék
`svelte`	GitHub	Online játék
`sveltekit`	GitHub	Online játék
`profiling`	GitHub	Nem elérhető
`typecheck`	GitHub	Online játék
`workspace`	GitHub	Online játék

Vitestet használó projektek

Kiadatlan 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. Telepítheti az npm i https://pkg.pr.new/vitest@{commit} paranccsal.

Ha saját módosításait szeretné helyben tesztelni, saját maga is elkészítheti és linkelheti (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 felületeken.

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 ​

Munkaterületek támogatása ​

Parancssori felület ​

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

IDE integrációk ​

Példák ​

Vitestet használó projektek ​

Kiadatlan 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

Munkaterületek támogatása

Parancssori felület

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

IDE integrációk

Példák

Vitestet használó projektek

Kiadatlan commitok használata

Közösség