Unit-Tests mit Vitest: Ein Test-Framework der nächsten Generation

Warum Vitest wählen?

Vitest wurde unter Berücksichtigung moderner Entwicklungen entwickelt. Darum sticht es heraus:

Geschwindigkeit

Vitest nutzt Vite als Grundlage und nutzt seinen blitzschnellen Hot Module Replacement (HMR) und esbuild für die Bündelung und Transpilation. Dies ergibt:

• Smart & Instant Watch-Modus: Tests werden nur für betroffene Dateien erneut ausgeführt, sodass die Feedbackschleife sofort erfolgt.
• Out-of-box ESM-Unterstützung: Moderne Projekte profitieren von der direkten Unterstützung für ES-Module ohne Hacks.

Bei Leistungsbenchmarks übertrifft Vitest Jest durchweg deutlich, da es die optimierte Build-Pipeline von Vite nutzt.

Framework	Time to run 500 tests
Jest	~8 seconds
Vitest	~3 seconds
Mocha	~6 seconds

Hinweis:Diese Benchmarks können je nach Projektkomplexität und Systemspezifikationen variieren.

Kompatibilität

Vitest ist Jest-kompatibel, was bedeutet, dass Sie einen Großteil Ihrer vorhandenen Testsuite mit minimalen Änderungen wiederverwenden können. Es unterstützt auch beliebte Tools wie TypeScript, JSX und ESM sofort einsatzbereit.

Entwicklererfahrung

• Integriert in Vites HMR für eine schnelle Testiteration.
• Einfache API und Konfiguration.
• Reichhaltiges Ökosystem und wachsende Community-Unterstützung.

---

Vitest einrichten

Lassen Sie uns in die Einrichtung von Vitest in einem TypeScript-Projekt eintauchen. Wir demonstrieren dies anhand eines React-Projekts, aber die Schritte sind für Vue 3- oder Node.js-Projekte ähnlich.

Installation

1. Stellen Sie sicher, dass Node.js und npm/yarn/pnpm installiert sind.
2. Installieren Sie Vitest und seine Peer-Abhängigkeiten:

npm install --save-dev vitest

Für Projekte, die React verwenden, benötigen Sie außerdem die React-Testbibliothek:

npm install --save-dev @testing-library/react @testing-library/jest-dom

Konfiguration

Erstellen oder aktualisieren Sie Ihre vite.config.ts, um Vitest zu aktivieren:

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

Hinzufügen von Setup-Dateien

Setup-Dateien werden zum Konfigurieren der Testumgebung verwendet. Erstellen Sie eine test/setup.ts-Datei:
import '@testing-library/jest-dom';

Skripte hinzufügen

Aktualisieren Sie Ihre package.json, um ein Testskript aufzunehmen:

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

---

Unit-Tests mit Vitest schreiben

Vitest bietet eine Jest-ähnliche API, die das Schreiben von Tests unkompliziert macht. Hier ist ein einfaches Beispiel:

Beispiel: React-Komponente

Stellen Sie sich vor, Sie haben eine React-Komponente:

// src/components/Greeting.tsx
import React from 'react';

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC<greetingprops> = ({ name }) => {
  return <h1 id="Hello-name">Hello, {name}!</h1>;
};
</greetingprops>

Schreibtests

Erstellen Sie eine Testdatei für die Komponente:

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render(<greeting name="Vitest"></greeting>);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

Ausführen von Tests

Führen Sie die Tests aus mit:
npm-Lauftest

Sie sehen eine Ausgabe ähnlich dieser:
✓ Die Begrüßungskomponente gibt die richtige Begrüßung wieder.

---

Erweiterte Funktionen

Verspottung

Vitest unterstützt direkt Mocking-Module und -Funktionen:

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

Snapshot-Tests

Snapshot-Testen ist so einfach wie:

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render(<greeting name="Vitest"></greeting>);
  expect(container).toMatchSnapshot();
});

Leistungstests

Verwenden Sie die CLI-Optionen von Vitest, um die Leistung zu messen:
vitest --run --coverage

---

Abschluss

Vitest ist eine überzeugende Wahl für moderne Tests und bietet Geschwindigkeit, Einfachheit und umfangreiche Funktionen von Vite. Egal, ob Sie von Jest migrieren oder neu beginnen, Vitest bietet ein hervorragendes Entwicklererlebnis und stellt sicher, dass Ihre Tests genauso schnell laufen wie Ihr Code.

Probieren Sie Vitest bei Ihrem nächsten Projekt aus und erleben Sie den Unterschied!

Referenzen

Vitest-Website
Vite

Das obige ist der detaillierte Inhalt vonUnit-Tests mit Vitest: Ein Test-Framework der nächsten Generation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!