GENAU wie Block 11 der Symfony-Schulung erklärte, WARUM Tests Vertrauen schaffen, gilt DASSELBE Prinzip für React – Vitest (das zu Vite PASSENDE Test-Framework) UND React Testing Library sind der HEUTIGE Standard.

Die Werkzeuge installieren

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

Vite für Tests konfigurieren

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

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

environment: 'jsdom' simuliert einen Browser-DOM in Node.js, OHNE einen ECHTEN Browser zu starten – SCHNELL genug, um HUNDERTE Tests in Sekunden auszuführen.

Den ersten Komponenten-Test

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import CreateProjectForm from './CreateProjectForm';

function renderWithQueryClient(ui: React.ReactElement) {
  const queryClient = new QueryClient();

  return render(
    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
  );
}

describe('CreateProjectForm', () => {
  it('zeigt ein Eingabefeld und einen Button', () => {
    renderWithQueryClient(<CreateProjectForm />);

    expect(screen.getByPlaceholderText('Projektname')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /projekt erstellen/i })).toBeInTheDocument();
  });
});

renderWithQueryClient UMHÜLLT die Komponente MIT DEMSELBEN QueryClientProvider aus Kapitel 73 – CreateProjectForm nutzt useCreateProject (Kapitel 78) INTERN, das OHNE Provider mit einem Laufzeitfehler ABBRECHEN würde.

Nutzerinteraktion simulieren

it('aktualisiert das Eingabefeld beim Tippen', async () => {
  const user = userEvent.setup();
  renderWithQueryClient(<CreateProjectForm />);

  const input = screen.getByPlaceholderText('Projektname');
  await user.type(input, 'Neues Projekt');

  expect(input).toHaveValue('Neues Projekt');
});

@testing-library/user-event simuliert ECHTE Tastatur-/Maus-Ereignisse (Tastendruck FÜR Tastendruck) statt fireEvents SYNTHETISCHE Events – NÄHER am tatsächlichen Nutzerverhalten, GENAU DIE Philosophie hinter Testing Library: "teste, WIE ein Nutzer die Anwendung benutzt".

Die Tests ausführen

npm run test