Features

• Vites Konfiguration, Transformatoren, Resolver und Plugins.
• Verwenden Sie dieselbe Konfiguration wie in Ihrer App, um die Tests auszuführen!
• Intelligenter & schneller Watch-Modus, ähnlich HMR für Tests!
• Komponententests für Vue, React, Svelte, Lit und mehr
• Out-of-the-Box-Unterstützung für TypeScript / JSX
• ESM first, Top-Level-Await
• Multi-Threading mit Workers über Tinypool
• Benchmarking-Unterstützung mit Tinybench
• Filtern, Timeouts und gleichzeitige Ausführung für Test-Suites und einzelne Tests
• Workspace Unterstützung
• Snapshot-Unterstützung, die mit Jest kompatibel ist
• Chai ist für Assertions integriert + Jest expect-kompatible APIs
• Tinyspy integriert für Mocking
• happy-dom oder jsdom zum Mocken von DOM
• Code Coverage über v8 oder istanbul
• Rust-ähnliches In-Source-Testing
• Typtests über expect-type

Erfahren Sie in einem Video, wie Sie Ihren ersten Test schreiben

Gemeinsame Konfiguration für Test, Entwicklung und Build

Vitests Konfiguration, Transformatoren, Resolver und Plugins ermöglichen die Wiederverwendung derselben Konfiguration wie in Ihrer App für die Testausführung.

Erfahren Sie mehr unter Konfigurieren von Vitest.

Watchmodus

$ vitest

Wenn Sie Ihren Quellcode oder die Testdateien ändern, analysiert Vitest intelligent den Modulgraphen. Anschließend werden nur die relevanten Tests erneut ausgeführt, ähnlich wie HMR in Vite funktioniert.

vitest startet standardmäßig im Watch-Modus, wenn Sie sich in einer Entwicklungsumgebung befinden, und im Run-Modus in einer CI-Umgebung (sofern process.env.CI gesetzt ist). Sie können vitest watch oder vitest run verwenden, um den gewünschten Modus explizit festzulegen.

Gängige Web-Technologien Out-of-the-Box

Out-of-the-Box Unterstützung für ES Module / TypeScript / JSX / PostCSS

Threads

Multi-Threading mit Workers über Tinypool (ein leichtgewichtiger Fork von Piscina), wodurch Tests parallel ausgeführt werden können. Threads sind in Vitest standardmäßig aktiviert und können durch Übergabe von --no-threads in der CLI deaktiviert werden.

Vitest isoliert außerdem die Umgebung jeder Datei, sodass sich Änderungen an Umgebungsvariablen in einer Datei nicht auf andere auswirken. Die Isolation kann durch Übergabe von --no-isolate an die CLI deaktiviert werden (wobei die Korrektheit zugunsten der Laufzeitleistung beeinträchtigt wird).

Testfilterung

Vitest bietet verschiedene Möglichkeiten, die auszuführenden Tests einzugrenzen, um das Testen zu beschleunigen und die Konzentration auf die Entwicklung zu erleichtern.

Erfahren Sie mehr über Testfilterung.

Gleichzeitige Ausführung von Tests

Verwenden Sie .concurrent in aufeinanderfolgenden Tests, um diese parallel auszuführen.

import { describe, it } from 'vitest';

// Die beiden mit concurrent markierten Tests werden parallel ausgeführt
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 Test-Suite verwenden, wird jeder Test innerhalb dieser Suite parallel ausgeführt.

import { describe, it } from 'vitest';

// Alle Tests innerhalb dieser Suite werden parallel ausgeführt
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 auch .skip, .only und .todo in gleichzeitigen Test-Suites und Tests verwenden. Lesen Sie mehr in der API-Referenz.

WARNING

Bei der Ausführung von Concurrent Tests müssen Snapshots und Assertions expect aus dem lokalen Testkontext verwenden. Dies stellt sicher, dass der richtige Test identifiziert wird.

Snapshot

Jest-kompatible Unterstützung für Snapshots.

import { expect, it } from 'vitest';

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

Erfahren Sie mehr unter Snapshot.

Kompatibilität mit Chai und Jest expect

Chai ist für Assertions integriert, ebenso wie Jest expect-kompatible APIs.

Beachten Sie, dass test.globals auf true gesetzt werden sollte, um die Kompatibilität zu verbessern, wenn Sie Bibliotheken von Drittanbietern verwenden, die Matcher hinzufügen.

Mocking

Tinyspy ist für Mocking mit jest-kompatiblen APIs im 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 => arg);

fn('world', 2);

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

Vitest unterstützt sowohl happy-dom als auch jsdom für das Mocken von DOM- und Browser-APIs. Diese sind nicht in Vitest enthalten, daher müssen Sie sie möglicherweise installieren:

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

Ändern Sie anschließend die environment-Option in Ihrer Konfigurationsdatei:

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

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

Erfahren Sie mehr unter Mocking.

Code 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 Codeabdeckung.

In-Source-Testing

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

Dadurch teilen sich die Tests denselben Gültigkeitsbereich wie die Implementierungen. Private Zustände können getestet werden, ohne sie zu exportieren. Gleichzeitig wird die Feedbackschleife für die Entwicklung verkürzt.

// src/index.ts

// die Implementierung
export function add(...args: 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}

Ab Vitest 0.23.0 können Sie Benchmark-Tests mit der bench-Funktion über Tinybench ausführen, um Leistungsergebnisse zu vergleichen.

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

Typtests ^experimental

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

import { assertType, expectTypeOf } 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 }));
});