Ein Komponententest soll bestätigen, was ein Nutzer nach einer Aktion sehen kann. Er muss nicht jeden internen State kennen. Ein Repository-Test prüft dagegen Speicherung, Beziehungen und Rollback. Hausakte verwendet für solche Verträge echte SQLite-Datenbanken. Das kleine Browserbeispiel prüft die normalisierte Formularübernahme aus Tutorial 11.
01Den Test einrichten
Verwende das React-Projekt aus Tutorial 10 mit App.tsx aus Tutorial 11. Die package.json enthält Vitest, Testing Library und jsdom. Speichere den Test als src/App.test.tsx. Die Umgebungszeile aktiviert einen Browser-DOM für diesen Test.
// @vitest-environment jsdom
import React from 'react';
import { afterEach, expect, test } from 'vitest';
import { cleanup, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { App } from './App';
afterEach(cleanup);
test('confirmed input is normalised and displayed', async () => {
render(<App />);
const user = userEvent.setup();
await user.type(screen.getByLabelText('Title'), ' Roof ');
await user.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.getByRole('listitem').textContent).toBe('Roof');
});
test('blank input creates no record', async () => {
render(<App />);
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.queryAllByRole('listitem')).toHaveLength(0);
expect(screen.getByRole('alert').textContent).toBe('Title required');
});
Starten / prüfen
npm test02Über zugängliche Rollen testen
getByLabelText findet das Feld so, wie es für Hilfsmittel beschriftet ist. getByRole findet den echten Button. userEvent bildet Eingabe und Klick nach. Wir prüfen anschließend einen listitem mit dem normalisierten Text.
03Eine leere Eingabe prüfen
Der zweite Test klickt ohne Eingabe. Es darf kein Eintrag entstehen. Stattdessen muss die Fehlermeldung sichtbar werden. cleanup trennt die Testläufe, damit ein vorheriger Bildschirm nicht den nächsten beeinflusst.
04Die passenden Grenzen ergänzen
Für das echte Repository teste Fremdschlüssel, Migrationen, Transaktionsrollback und erneutes Öffnen. Für Kamera und Scanner brauchst du einen nativen Test oder einen dokumentierten Geräteablauf. Ein jsdom-Test beweist weder SQLite-Persistenz noch Android-Berechtigungen.
Beide Tests bestehen. Wird trim entfernt oder die Leerprüfung übersprungen, muss mindestens ein Test fehlschlagen.
Deine Übung
Teste, dass das Eingabefeld nach erfolgreichem Speichern leer ist und nach einem Fehler erhalten bleibt.
Lösung mit Erklärung anzeigen
Lies das Feld als HTMLInputElement und prüfe value. Tippe für den Fehlerfall nur Leerzeichen. Nach dem fehlgeschlagenen Submit müssen diese weiterhin im Feld stehen. Das schützt den Entwurf vor unbeabsichtigtem Verlust.
Projektbezug und Quellen
Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.