Funktionen

• Vite-Konfiguration, Transformer, Resolver und Plugins
• Nutzen Sie dieselbe Konfiguration wie in Ihrer Anwendung, um Tests auszuführen!
• Intelligenter und sofortiger Watch-Modus, vergleichbar mit HMR für Tests!
• Komponententests für Vue, React, Svelte, Lit, Marko und weitere Frameworks
• Out-of-the-box-Unterstützung für TypeScript / JSX
• ESM zuerst, Top-Level-Await
• Worker-Multi-Threading über Tinypool
• Benchmarking-Unterstützung mit Tinybench
• Filterung, Timeouts, Parallelität für Suiten und Tests
• Workspace-Unterstützung
• Jest-kompatible Snapshots
• Chai integriert für Assertions + Jest expect-kompatible APIs
• Tinyspy integriert für Mocking
• happy-dom oder jsdom für DOM-Mocking
• Browser-Modus zum Ausführen von Komponententests im Browser
• Code-Coverage über v8 oder istanbul
• Rust-ähnliches In-Source-Testing
• Typ-Testing über expect-type
• Sharding-Unterstützung

Erfahren Sie, wie Sie Ihren ersten Test per Video schreiben

Gemeinsame Konfiguration zwischen Test, Entwicklung und Build

Vitest nutzt die Konfiguration, Transformer, Resolver und Plugins von Vite. Verwenden Sie dieselbe Einrichtung wie in Ihrer Anwendung, um die Tests auszuführen.

Erfahren Sie mehr unter Vitest konfigurieren.

Watch-Modus

$ vitest

Wenn Sie Ihren Quellcode oder die Testdateien ändern, durchsucht Vitest intelligent den Modulgraphen und führt nur die zugehörigen Tests erneut aus, genau wie HMR in Vite funktioniert!

vitest startet standardmäßig in der Entwicklungsumgebung im watch mode und in der CI-Umgebung (wenn process.env.CI vorhanden ist) intelligent im run mode. Sie können vitest watch oder vitest run verwenden, um den gewünschten Modus explizit anzugeben.

Starten Sie Vitest mit dem --standalone-Flag, um es im Hintergrund laufen zu lassen. Es werden keine Tests ausgeführt, bis sich die relevanten Dateien ändern. Vitest führt keine Tests aus, wenn der Quellcode geändert wird, bis der Test, der die Quelle importiert, ausgeführt wurde.

Gängige Web-Idiome Out-Of-The-Box

Out-of-the-box ES Module / TypeScript / JSX-Unterstützung / PostCSS

Threads

Standardmäßig führt Vitest Testdateien in mehreren Prozessen unter Verwendung von node:child_process über Tinypool (einem leichtgewichtigen Fork von Piscina) aus, wodurch Tests gleichzeitig ausgeführt werden können. Wenn Sie Ihre Testsuite noch weiter beschleunigen möchten, sollten Sie --pool=threads aktivieren, um Tests mit node:worker_threads auszuführen (beachten Sie, dass einige Pakete mit dieser Einrichtung möglicherweise nicht funktionieren).

Um Tests in einem einzigen Thread oder Prozess auszuführen, siehe poolOptions.

Vitest isoliert auch die Umgebung jeder Datei, sodass Umgebungsänderungen in einer Datei andere nicht beeinflussen. Die Isolation kann durch Übergabe von --no-isolate an die CLI deaktiviert werden (was die Korrektheit zugunsten der Ausführungsleistung beeinträchtigen kann).

Testfilterung

Vitest bietet viele Möglichkeiten, die auszuführenden Tests einzugrenzen, um das Testen zu beschleunigen und Ihnen zu ermöglichen, sich auf die Entwicklung zu konzentrieren.

Erfahren Sie mehr über Testfilterung.

Tests gleichzeitig ausführen

Verwenden Sie .concurrent in aufeinanderfolgenden Tests, um sie parallel zu starten.

import { describe, it } from 'vitest';

// Die beiden mit concurrent markierten Tests werden parallel gestartet
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

Wenn Sie .concurrent für eine Suite verwenden, wird jeder Test darin parallel gestartet.

import { describe, it } from 'vitest';

// Alle Tests innerhalb dieser Suite werden parallel gestartet
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

Sie können .skip, .only und .todo auch mit parallelen Suiten und Tests verwenden. Lesen Sie mehr in der API-Referenz.

WARNING

Beim Ausführen paralleler Tests müssen Snapshots und Assertions expect aus dem lokalen Testkontext verwenden, um sicherzustellen, dass der richtige Test erkannt wird.

Snapshot

Jest-kompatible Snapshot-Unterstützung.

import { expect, it } from 'vitest';

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

Erfahren Sie mehr unter Snapshot.

Chai und Jest expect Kompatibilität

Chai ist für Assertions mit Jest expect-kompatiblen APIs integriert.

Beachten Sie, dass, wenn Sie Bibliotheken von Drittanbietern verwenden, die Matcher hinzufügen, das Setzen von test.globals auf true eine bessere Kompatibilität bietet.

Mocking

Tinyspy ist für Mocking mit jest-kompatiblen APIs auf dem vi-Objekt integriert.

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');

Vitest unterstützt sowohl happy-dom als auch jsdom zum Mocken von DOM- und Browser-APIs. Sie sind nicht in Vitest enthalten, Sie müssen sie separat installieren:

$ npm i -D happy-dom
# oder
$ npm i -D jsdom

Danach ändern Sie die Option environment in Ihrer Konfigurationsdatei:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

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

Erfahren Sie mehr unter Mocking.

Coverage

Vitest unterstützt native Code-Coverage über v8 und instrumentierte Code-Coverage über istanbul.

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

Erfahren Sie mehr unter Coverage.

In-Source-Testing

Vitest bietet auch eine Möglichkeit, Tests innerhalb Ihres Quellcodes zusammen mit der Implementierung auszuführen, ähnlich wie Rusts Modultests.

Dadurch teilen sich die Tests denselben Closure wie die Implementierungen und können private Zustände testen, ohne sie zu exportieren. Gleichzeitig wird der Feedback-Loop für die Entwicklung verkürzt.

// src/index.ts

// die Implementierung
export function add(...args: number[]): number {
  return args.reduce((a, b) => a + b, 0);
}

// In-Source-Testsuiten
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);
  });
}

Erfahren Sie mehr unter In-Source-Testing.

Benchmarking Experimentell

Sie können Benchmark-Tests mit der Funktion bench über Tinybench ausführen, um Leistungsvergleiche durchzuführen.

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;
    });
  });
});

Typ-Testing Experimentell

Sie können Tests schreiben, um Typ-Regressionen abzufangen. Vitest wird mit dem Paket expect-type geliefert, um Ihnen eine ähnliche und leicht verständliche API bereitzustellen.

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 ist ein String
  assertType(mount({ name: 42 }));
});

Sharding

Führen Sie Tests auf verschiedenen Maschinen mit den Flags --shard und --reporter=blob aus. Alle Test- und Coverage-Ergebnisse können am Ende Ihrer CI-Pipeline mit dem Befehl --merge-reports zusammengeführt werden:

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

Weitere Informationen finden Sie unter Leistung verbessern | Sharding.

Umgebungsvariablen

Vitest lädt ausschließlich Umgebungsvariablen, die mit VITE_ beginnen, aus .env-Dateien, um die Kompatibilität mit Frontend-bezogenen Tests zu gewährleisten und sich an Vites etablierte Konvention zu halten. Um dennoch jede Umgebungsvariable aus .env-Dateien zu laden, können Sie die Methode loadEnv verwenden, die von vite importiert wird:

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

export default defineConfig(({ mode }) => ({
  test: {
    // mode definiert, welche ".env.{mode}"-Datei ausgewählt werden soll, falls vorhanden
    env: loadEnv(mode, process.cwd(), ''),
  },
}));