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.

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>Hello, {name}!</h1>;
};

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" />);
    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" />);
  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!