React-Komponente mit Vitest und Testing Library testen

Prompt

Arbeite als Frontend-QA-Ingenieur mit Expertise in Testing Library und in Tests, die Verhalten prüfen statt Implementierungsdetails.

Kontext:
- Code der Komponente: {{komponenten_code}}
- Zu prüfendes Verhalten: {{verhalten}}
- Werkzeuge: {{werkzeuge}}
- Netzwerkaufrufe: {{netzwerk}}

Wenn die Komponente von Contexts, Routen oder Providern abhängt, die nicht im Code stehen, frag mich, wie sie eingebunden werden, bevor du Tests schreibst.

Liefere:
1. Einen Testplan als Tabelle: Fall, Art (Rendering, Interaktion, Fehler, Barrierefreiheit), Priorität.
2. Die vollständige Testdatei: zuerst Queries nach Rolle und zugänglichem Namen (`getByRole`), `userEvent` statt `fireEvent`, `findBy` für Asynchrones und Assertions auf das, was Nutzer sehen.
3. Netzwerk-Mocks gemäß {{netzwerk}} mit einem Erfolgsfall, einem Fehlerfall und, wo sinnvoll, einem langsamen Ladefall.
4. Einen `renderWithProviders`-Helper, falls Provider nötig sind.
5. Minimales Setup, falls es fehlt: jsdom- oder happy-dom-Umgebung, Setup-Datei mit den jest-dom-Matchern und die Skripte in package.json.
6. Verbleibende Abdeckungslücken und warum sie sich nicht für Unit-Tests lohnen (etwa weil sie in einen End-to-End-Test gehören).

Vorgaben:
- Keine Snapshot-Tests ohne Begründung.
- Kein Zugriff auf internen State, CSS-Klassen oder `data-testid`, wenn es eine zugängliche Query gibt.
- Wenn beim Schreiben der Tests ein Bug oder ein Barrierefreiheitsproblem auffällt, melde es separat; behebe es nicht stillschweigend.
- Erfinde keine Props oder Texte, die nicht im Code stehen; nutze [AUSFÜLLEN], wenn etwas fehlt.

Format: Plan, Codeblöcke mit Dateinamen und eine Liste der Befehle zum Ausführen.

So verwenden Sie ihn

Anwendungsbeispiel

Beispielergebnis

import { afterAll, afterEach, beforeAll, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse, delay } from 'msw';
import { setupServer } from 'msw/node';
import { WarenkorbUebersicht } from './WarenkorbUebersicht';

const server = setupServer(http.post('/api/bezahlen', () => HttpResponse.json({ ok: true }))); // [AUSFÜLLEN: echter Endpoint]
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

it('berechnet die Summe neu, wenn sich die Menge ändert', async () => {
  const user = userEvent.setup();
  render(<WarenkorbUebersicht />);
  const menge = screen.getByRole('spinbutton', { name: /menge/i });
  await user.clear(menge);
  await user.type(menge, '3');
  expect(screen.getByText(/summe/i)).toHaveTextContent('[AUSFÜLLEN: erwartete Summe]');
});

it('deaktiviert Bezahlen und zeigt bei API-Fehler eine Meldung', async () => {
  server.use(http.post('/api/bezahlen', async () => { await delay(100); return new HttpResponse(null, { status: 500 }); }));
  const user = userEvent.setup();
  render(<WarenkorbUebersicht />);
  const bezahlen = screen.getByRole('button', { name: /bezahlen/i });
  await user.click(bezahlen);
  expect(bezahlen).toBeDisabled();
  expect(await screen.findByRole('alert')).toBeInTheDocument();
});

Wichtige Fakten

Kategorie

Programmierung & Entwicklung · React

Ausgabetyp

Code

Niveau

Fortgeschritten

Entwickelt für

ChatGPT, Claude, Gemini und Microsoft Copilot

Verifiziert in

Redaktionelle Prüfung ausstehend

Variablen

Code der Komponente, Zu prüfendes Verhalten, Werkzeuge und Netzwerkaufrufe

Sprache

Deutsch

Preis

Kostenlos, ohne Anmeldung

Aktualisiert

07.11.2026

Häufig gestellte Fragen