Jellemzők

• Vite konfigurációjának, transzformereinek, feloldóinak és bővítményeinek használata
• Ugyanazt a beállítást használja az alkalmazásból a tesztek futtatásához.
• Intelligens és azonnali figyelő mód, a HMR-hez hasonlóan a tesztekhez!
• Komponens-tesztelés Vue, React, Svelte, Lit, Marko és más keretrendszerekhez
• Beépített TypeScript és JSX támogatás
• ESM-központú, top-level await támogatással
• Többszálú végrehajtás (workers) a Tinypool segítségével
• Teljesítménymérés támogatása a Tinybench segítségével
• Szűrés, időtúllépések, valamint tesztcsomagok és tesztek párhuzamos futtatása
• Projektek támogatása
• Jest-kompatibilis Snapshot
• Chai beépített támogatása az állításokhoz + Jest expect kompatibilis API-k
• Tinyspy beépített támogatása a mockinghoz
• happy-dom vagy jsdom a DOM mockolásához
• Böngésző mód a komponens-tesztek böngészőben való futtatásához
• Kódlefedettség a v8 vagy istanbul segítségével
• Rust-szerű forráskódon belüli tesztelés
• Típusellenőrzés az expect-type segítségével
• Sharding támogatás
• Nem kezelt hibák jelentése

Tanuld meg, hogyan írd meg az első tesztedet videó segítségével

Megosztott konfiguráció a teszt, fejlesztés és build között

A Vitest a Vite konfigurációját, transzformereit, feloldóit és bővítményeit használja. Ezáltal ugyanazt a beállítást használhatod az alkalmazásodból a tesztek futtatásához.

További információ: Vitest konfigurálása.

Figyelő mód

$ vitest

Amikor módosítod a forráskódot vagy a tesztfájlokat, a Vitest intelligensen átvizsgálja a modulgráfot, és csak a kapcsolódó teszteket futtatja újra, akárcsak a HMR a Vite-ben!

A vitest alapértelmezetten watch mode-ban indul fejlesztői környezetben, és run mode-ban CI környezetben (amikor process.env.CI létezik). Használhatod a vitest watch vagy vitest run parancsot a kívánt mód explicit megadásához.

Indítsd el a Vitest-et a --standalone flaggel, hogy a háttérben fusson. Nem fog teszteket futtatni, amíg azok nem változnak. A Vitest nem futtat teszteket a forráskód változása esetén, amíg az azt importáló teszt nem futott le.

Gyakori webes idiómák beépített támogatása

Beépített ES modul / TypeScript / JSX / PostCSS támogatás.

Szálak

Alapértelmezetten a Vitest tesztfájlokat több folyamatban futtatja a node:child_process használatával, a Tinypool (a Piscina könnyűsúlyú forkja) révén, lehetővé téve a tesztek egyidejű futtatását. Ha még tovább szeretnéd gyorsítani a tesztcsomagodat, fontold meg a --pool=threads engedélyezését a tesztek node:worker_threads segítségével történő futtatásához (vedd figyelembe, hogy egyes csomagok nem működhetnek ezzel a beállítással).

A tesztek egyetlen szálban vagy folyamatban való futtatásához lásd a poolOptions részt.

A Vitest emellett izolálja az egyes fájlok környezetét, így az egyik fájlban végrehajtott környezeti változások nem befolyásolják a többit. Az izoláció letiltható a --no-isolate átadásával a CLI-nek (a futtatási teljesítmény növelése érdekében, a helyesség rovására).

Tesztszűrés

A Vitest számos módot kínál a futtatandó tesztek körének szűkítésére, felgyorsítva ezzel a tesztelést, így a fejlesztésre koncentrálhatsz.

További információ a Tesztszűrésről.

Tesztek párhuzamos futtatása

Használd a .concurrent metódust egymást követő teszteknél, hogy párhuzamosan indítsd őket.

import { describe, it } from 'vitest';

// A két, concurrent-tel jelölt teszt párhuzamosan indul el
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

Ha egy tesztcsomagon használod a .concurrent metódust, akkor az összes teszt párhuzamosan indul el benne.

import { describe, it } from 'vitest';

// A tesztcsomagon belüli összes teszt párhuzamosan indul el
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

A .skip, .only és .todo kulcsszavakat is használhatod párhuzamos tesztcsomagokkal és tesztekkel. További információ az API referenciában.

WARNING

Párhuzamos tesztek futtatásakor a pillanatfelvételeknek és az állításoknak a helyi Tesztkörnyezetből származó expect-et kell használniuk a megfelelő teszt észleléséhez.

Snapshot

Jest-kompatibilis snapshot támogatás.

import { expect, it } from 'vitest';

it('renders correctly', () => {
  const result = render();
  expect(result).toMatchSnapshot();
});

További információ: Snapshot.

Chai és Jest expect kompatibilitás

A Chai beépített támogatást nyújt az állításokhoz, Jest expect-kompatibilis API-kkal.

Megjegyzendő, hogy ha harmadik féltől származó könyvtárakat használsz, amelyek matchereket adnak hozzá, a test.globals true értékre állítása jobb kompatibilitást biztosít.

Mocking

A Tinyspy beépített támogatást nyújt a mockinghoz, jest-kompatibilis API-kkal a vi objektumon.

import { expect, vi } from 'vitest';

const fn = vi.fn();

fn('hello', 1);

expect(vi.isMockFunction(fn)).toBe(true);
expect(fn.mock.calls[0]).toEqual(['hello', 1]);

fn.mockImplementation((arg: string) => arg);

fn('world', 2);

expect(fn.mock.results[1].value).toBe('world');

A Vitest támogatja a happy-dom és a jsdom könyvtárakat is a DOM és böngésző API-k mockolásához. Ezek nem tartoznak a Vitesthez, külön kell telepíteni őket:

happy-dom

$ npm i -D happy-dom

jsdom

$ npm i -D jsdom

Ezt követően módosítsd az environment opciót a konfigurációs fájlban:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'happy-dom', // vagy 'jsdom', 'node'
  },
});

További információ: Mocking.

Lefedettség

A Vitest natív kódlefedettséget támogat a v8 segítségével, és az instrumentált kódlefedettséget az istanbul segítségével.

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

További információ: Lefedettség.

Forráskódon belüli tesztelés

A Vitest lehetővé teszi a tesztek futtatását a forráskódon belül, az implementációval együtt, hasonlóan a Rust modul tesztjeihez.

Ezáltal a tesztek ugyanazt a lezárást (closure) osztják meg, mint az implementációk, és lehetővé teszik a privát állapotok tesztelését exportálás nélkül. Emellett szorosabb visszajelzési ciklust biztosít a fejlesztés során.

// az implementáció
export function add(...args: number[]): number {
  return args.reduce((a, b) => a + b, 0);
}

// forráskódon belüli tesztcsomagok
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('add', () => {
    expect(add()).toBe(0);
    expect(add(1)).toBe(1);
    expect(add(1, 2, 3)).toBe(6);
  });
}

További információ: Forráskódon belüli tesztelés.

Benchmarking Kísérleti

Futtathatsz teljesítménymérést a bench funkcióval a Tinybench segítségével a teljesítményeredmények összehasonlításához.

import { bench, describe } from 'vitest';

describe('sort', () => {
  bench('normal', () => {
    const x = [1, 5, 4, 2, 3];
    x.sort((a, b) => {
      return a - b;
    });
  });

  bench('reverse', () => {
    const x = [1, 5, 4, 2, 3];
    x.reverse().sort((a, b) => {
      return a - b;
    });
  });
});

Típusellenőrzés Kísérleti

Írhatsz teszteket a típusregressziók azonosítására. A Vitest az expect-type csomagot tartalmazza, hogy hasonló és könnyen érthető API-t biztosítson számodra.

import { assertType, expectTypeOf, test } from 'vitest';
import { mount } from './mount.js';

test('my types work properly', () => {
  expectTypeOf(mount).toBeFunction();
  expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>();

  // @ts-expect-error name is a string
  assertType(mount({ name: 42 }));
});

Sharding

Futtass teszteket különböző gépeken a --shard és --reporter=blob flagek segítségével. Minden teszt- és lefedettségi eredmény egyesíthető a CI folyamat végén a --merge-reports parancs segítségével:

vitest --shard=1/2 --reporter=blob --coverage
vitest --shard=2/2 --reporter=blob --coverage
vitest --merge-reports --reporter=junit --coverage

További információért lásd: Teljesítmény javítása | Sharding.

Környezetváltozók

A Vitest kizárólag a VITE_ előtaggal ellátott környezetváltozókat tölti be az .env fájlokból, hogy fenntartsa a kompatibilitást a frontend tesztekkel, a Vite által megállapított konvenció szerint. Ahhoz, hogy minden környezetváltozót betölts az .env fájlokból, használhatod a vite-ből importált loadEnv metódust:

import { loadEnv } from 'vite';
import { defineConfig } from 'vitest/config';

export default defineConfig(({ mode }) => ({
  test: {
    // a mód határozza meg, hogy melyik ".env.{mode}" fájlt válassza, ha létezik
    env: loadEnv(mode, process.cwd(), ''),
  },
}));

Nem kezelt hibák

Alapértelmezés szerint a Vitest elkapja és jelenti az összes kezeletlen elutasítást, kezeletlen kivételt (Node.js-ben) és hibaeseményt (a böngészőben).

Ezt a viselkedést letilthatod, ha manuálisan kezeled a hibákat. A Vitest feltételezi, hogy a callbacket te kezeled, és nem fogja jelenteni a hibát.

setup.node.js

// Node.js-ben
process.on('unhandledRejection', () => {
  // saját kezelő
});

process.on('uncaughtException', () => {
  // saját kezelő
});

setup.browser.js

// a böngészőben
window.addEventListener('error', () => {
  // saját kezelő
});

window.addEventListener('unhandledrejection', () => {
  // saját kezelő
});

Alternatívaként figyelmen kívül hagyhatod a jelentett hibákat a dangerouslyIgnoreUnhandledErrors opcióval. A Vitest továbbra is jelenti ezeket, de nem befolyásolják a teszt eredményét (a kilépési kód nem változik).

Ha azt kell tesztelned, hogy egy hiba nem került elkapásra, létrehozhatsz egy ilyen tesztet:

test('my function throws uncaught error', async ({ onTestFinished }) => {
  onTestFinished(() => {
    // ha az esemény soha nem hívódott meg a teszt során,
    // győződj meg róla, hogy eltávolítod a következő teszt indítása előtt
    process.removeAllListeners('unhandledrejection');
  });

  return new Promise((resolve, reject) => {
    process.once('unhandledrejection', error => {
      try {
        expect(error.message).toBe('my error');
        resolve();
      } catch (error) {
        reject(error);
      }
    });

    callMyFunctionThatRejectsError();
  });
});