Tests für React-Komponenten mit Vitest und Testing Library

Vitest ist ein schneller, Vite-native Testlaufzeit-Tool, das vertraut anfühlt, wenn man Jest kennt – und lässt sich perfekt mit der React Testing Library für Tests zum Verhalten von Komponenten kombinieren. Diese Anleitung behandelt die Einrichtung, einen praktischen rote-grüne-Testzyklus, die Dateistruktur sowie die Art und Weise, wie man einem KI-Programmieragenten Anweisungen gibt, damit er hilft statt sinnlos zu arbeiten.

1. Projekt-Einrichtung

Installieren Sie den üblichen React-Testing-Stack als Entwicklungskomponenten:

npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

Für ein Vite-React-Projekt geben Sie Vitest Informationen über die Anwendung in vite.config.ts mit, damit Aliase und Plugins den Produktionsbauten entsprechen:

For a Vite React project, add Vitest to vite.config.ts:

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

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
    globals: true,
  },
})

environment: 'jsdom' stellt DOM-APIs ohne echten Browser zur Verfügung. Eine kleine Einrichtungsdatei registriert die jest-dom-Matcher einmal für jede Testsuite:

import '@testing-library/jest-dom/vitest'

Führen Sie diese Datei über Vitests Option setupFiles ein, damit Aussagen wie toBeInTheDocument und toHaveAccessibleName überall funktionieren.

2. Empfohlener Arbeitsablauf

Verwenden Sie einen engen Zyklus: Funktion → Test → Implementierung → Überprüfung → Refactoring.

1. Verstehen Sie die Funktion – listen Sie das für den Benutzer sichtbare Verhalten sowie wichtige Zustände auf (Laden, Erfolg, Fehler, leer, deaktiviert). Notieren Sie API- oder Browser-Grenzen, die Emulationen erfordern, damit die Tests deterministisch bleiben.
2. Schreiben Sie zuerst den Test – bevorzugen Sie Abfragen aus der React Testing Library; überprüfen Sie Ergebnisse, die der Benutzer wahrnimmt, nicht private Zustände; erzeugen Sie Klicks und Eingaben mithilfe von userEvent für mehr Realismus.

Führen Sie das Minimum um – konzentrieren Sie den Produktionscode darauf, die fehlerhaften Tests zu erfüllen; vermeiden Sie nur-Test-Hooks oder durchsickerte Interna, es sei denn, es gibt keine sauberere Lösung.

Führen Sie gezielte Tests durch, während Sie iterieren, damit die Rückmeldungen in Sekunden und nicht in Minuten erfolgen:

npx vitest run src/components/Button.test.tsx

During development:

Abschau-Modus für den lokalen Feedback-Zyklus:

npx vitest

Run the full suite

Vollständige Testsuite über das npm-Skript, das in Ihrer package.json definiert ist:

npm test

oder ein einmaliger CI-ähnlicher Ausführungsvorgang ohne Abschaufunktionen:

npx vitest run

Check coverage when appropriate

Abdeckungsrate, wenn Sie ungetestete Branches genauer untersuchen möchten:

npx vitest run --coverage

Betrachten Sie die Abdeckungsrate als Leitfaden und nicht als reines Statussymbol – bevorzugen Sie aussagekräftige Prüfungen statt des Strebens nach 100 %.

3. Teststruktur

Platzieren Sie die Tests gemeinsam mit den Komponenten, die sie schützen:

src/
├── components/
│   ├── LoginForm.tsx
│   └── LoginForm.test.tsx
├── hooks/
│   ├── useUser.ts
│   └── useUser.test.ts
├── pages/
│   ├── Dashboard.tsx
│   └── Dashboard.test.tsx
└── test/
    ├── setup.ts
    └── mocks/

For a component, structure tests around behavior:

Bilden Sie Fallbeispiele um die Ergebnisse der Benutzer statt um Namen von Methoden:

describe('LoginForm', () => {
  it('allows a user to submit valid credentials', async () => {
    // arrange
    // act
    // assert
  })

  it('shows validation errors for invalid input', async () => {
    // ...
  })  it('disables submission while logging in', async () => {
    // ...
  })
})

Behandeln Sie den erfolgreichen Ablauf, Validierungsfehler sowie deaktivierte oder ladende Zustände in separaten it-Blöcken. Wenn etwas schiefgeht, sollte der fehlerhafte Titel ein bestimmtes Verhalten beschreiben. Nutzen Sie Hilfsfunktionen sparsam; eine klar lesbare, duplizierte Einrichtung ist besser als raffinierte Fixtures, die die Absicht verbergen.

4. Arbeiten mit einem KI-Codeagenten

4. Vitest-agent prompt

Führen Sie den Agenten wie einen erfahrenen React-Testing-Engineer an: Schreiben oder aktualisieren Sie zunächst den fehlerhaften Test, implementieren Sie anschließend die kleinste Änderung und überprüfen Sie diese mit Vitest sowie Typüberprüfungen:

npx vitest run <target-test>
npx vitest run
npm run typecheck
npm run lint

Bitten Sie es, Tests mit der Testing Library (z. B. getByRole, findByText) gegenüber anfälligen CSS-Selektoren vorzuziehen, Netzwerkgrenzen zu simulieren anstelle des Zugriffs auf den Zustand der Komponenten, sowie eine kurze Notiz zu hinterlassen, wenn ein Test eine absichtliche Produktbeschränkung dokumentiert.

Abschlussgewohnheiten

Lassen Sie die Vitest-Konfiguration mit Vite gemeinsam genutzt werden, damit Pfadalias und Plugins der Produktumgebung entsprechen. Verwenden Sie in CI lieber run und überwachen Sie die Tests lokal. Erweitern Sie die Testsuite schrittweise mit neuen Funktionen, anstatt alles auf einmal umzuschreiben. Durch diesen Zyklus – zuerst testen, dann implementieren und überprüfen – bleiben React-Anwendungen anpassbar, ohne dass der durch Vite beschleunigte Feedbackzyklus, der Vitest ursprünglich attraktiv gemacht hat, verlangsamt wird.