Frontend Academy · Lektion

@testing-library/react: render, userEvent

Rendern Sie Komponenten in einem simulierten DOM, fragen Sie anhand von Rollen und Label-Texten ab, lösen Sie Benutzerinteraktionen mit userEvent aus und prüfen Sie die sichtbare Ausgabe.

@testing-library/react: render, userEvent ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Philosophie von Testing Library

@testing-library fördert Tests, die der Interaktion von Benutzern mit der Benutzeroberfläche ähneln. Fragen Sie Elemente anhand von Rolle, Label und Text ab – nicht anhand von Implementierungsdetails wie CSS-Klassennamen oder internen Komponenten.

Testing Library installieren

Installieren Sie Testing Library für React sowie das userEvent-Paket zur Simulation von Benutzerinteraktionen.

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

render() – Eine Komponente mounten

render(<Component />) mountet die Komponente in einem simulierten DOM. Die Funktion gibt Abfragefunktionen zurück, mit denen Sie Elemente finden.

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Elemente abfragen

Bevorzugen Sie Abfragen in dieser Reihenfolge: getByRole (barrierefrei), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Verwenden Sie queryBy*, wenn Sie die Nichtexistenz eines Elements testen. Verwenden Sie findBy* für asynchron erscheinende Elemente.

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent – Benutzeraktionen simulieren

userEvent simuliert echte Benutzerinteraktionen: Tippen, Klicken und Tastaturnavigation. Dies ist realistischer als das ältere fireEvent.

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

Formularübermittlung testen

Füllen Sie Formularfelder aus und übermitteln Sie das Formular. Prüfen Sie das Ergebnis – also das, was der Benutzer nach der Übermittlung sieht.

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

Benutzerdefinierte jest-dom-Matcher

@testing-library/jest-dom fügt nützliche Matcher hinzu: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), toHaveFocus().

Asynchrone Aktualisierungen von Komponenten testen

Verwenden Sie waitFor() oder findBy* für Elemente, die asynchron erscheinen (nach einem Fetch oder nach einem Timeout).

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Lade- und Fehlerzustände testen

Simulieren Sie die fetch-Antwort, um verschiedene Zustände zu testen. MSW (Mock Service Worker) ist das beste Werkzeug, um API-Antworten in Tests zu simulieren.

Barrierefreiheit testen

Testing Library fördert auf natürliche Weise die Barrierefreiheit – wenn Sie ein Element nicht anhand seiner Rolle oder seines Labels abfragen können, ist es wahrscheinlich nicht barrierefrei. Verwenden Sie jest-axe für automatisierte Prüfungen der Barrierefreiheit in Tests.

Keine Implementierungsdetails testen

Vermeiden Sie: Abfragen anhand von CSS-Klassennamen, den Import des internen Zustands einer Komponente und das Testen, ob bestimmte Methoden aufgerufen wurden. Testen Sie das Verhalten aus Sicht des Benutzers: was er sieht und was geschieht, wenn er interagiert.

Schnelltest

Welche Abfragefunktion von Testing Library sollten Sie bevorzugen, um interaktive Elemente zu finden?

Zusammenfassung: @testing-library/react

render() mountet Komponenten in einem simulierten DOM. Fragen Sie anhand von Rolle, Label und Text ab – nicht anhand von Implementierungsdetails. Verwenden Sie userEvent.setup() für realistische Benutzerinteraktionen. Verwenden Sie findBy* für asynchrone Elemente. jest-dom ermöglicht gut lesbare Assertions. Testen Sie aus Sicht des Benutzers: was er sieht und tut. Barrierefreie Komponenten lassen sich leichter testen.

Häufig gestellte Fragen

Ist die Lektion „@testing-library/react: render, userEvent“ kostenlos?

Ja — der vollständige Text von „@testing-library/react: render, userEvent“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „@testing-library/react: render, userEvent“?

Rendern Sie Komponenten in einem simulierten DOM, fragen Sie anhand von Rollen und Label-Texten ab, lösen Sie Benutzerinteraktionen mit userEvent aus und prüfen Sie die sichtbare Ausgabe. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „@testing-library/react: render, userEvent“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Jest einrichten und grundlegende Tests
@testing-library/react: render, userEvent
@testing-library/vue: Komponenten mounten
Module und API-Aufrufe mocken

← Zurück zu Frontend Academy