Integrationstests mit React Testing Library
Rendern Sie Components in Tests, lösen Sie Events aus und prüfen Sie sichtbare Ausgaben statt Implementierungsdetails.
Integrationstests mit React Testing Library ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist React Testing Library?
React Testing Library (RTL) empfiehlt Tests aus der Perspektive der Benutzer: Rendern Sie Komponenten, interagieren Sie mit ihnen wie ein Benutzer und prüfen Sie die sichtbare Ausgabe statt Implementierungsdetails.
Einrichtung
RTL ist in Create React App und der React-Vorlage von Vite enthalten. Für eine manuelle Einrichtung installieren Sie @testing-library/react und @testing-library/jest-dom.
// package.json
// "@testing-library/react": "^14.0.0",
// "@testing-library/jest-dom": "^6.0.0"
// setupTests.ts
import '@testing-library/jest-dom';Eine Komponente rendern
render() bindet eine Komponente in einem virtuellen DOM ein. Die Funktion gibt Query-Funktionen zurück, die auf die gerenderte Ausgabe beschränkt sind.
import { render, screen } from '@testing-library/react';
import { Button } from './Button';
test('renders button label', () => {
render(<Button label="Submit" onClick={() => {}} />);
expect(screen.getByText('Submit')).toBeInTheDocument();
});Elemente abfragen
Bevorzugen Sie Queries in dieser Reihenfolge: getByRole > getByLabelText > getByPlaceholderText > getByText. Role-Queries entsprechen den Bedeutungen der Barrierefreiheit.
// Best: query by role
const button = screen.getByRole('button', { name: /submit/i });
// Good: query by label (for form inputs)
const input = screen.getByLabelText('Email address');
// Acceptable: query by text
const heading = screen.getByText('Welcome');Events auslösen
Verwenden Sie userEvent aus @testing-library/user-event (bevorzugt) oder fireEvent (grundlegend). userEvent simuliert echte Browser-Interaktionen einschließlich Fokus und Blur.
import userEvent from '@testing-library/user-event';
test('types into input', async () => {
const user = userEvent.setup();
render(<SearchBar />);
const input = screen.getByRole('textbox');
await user.type(input, 'react');
expect(input).toHaveValue('react');
});Das Absenden eines Formulars testen
Rendern Sie das Formular, füllen Sie die Eingabefelder mit userEvent.type aus, klicken Sie auf „Absenden“ und prüfen Sie das Ergebnis (Erfolgsmeldung, Navigation oder Callback-Aufruf).
test('submits the login form', async () => {
const onLogin = jest.fn();
const user = userEvent.setup();
render(<LoginForm onLogin={onLogin} />);
await user.type(screen.getByLabelText('Email'), 'test@example.com');
await user.type(screen.getByLabelText('Password'), 'password123');
await user.click(screen.getByRole('button', { name: /log in/i }));
expect(onLogin).toHaveBeenCalledWith({ email: 'test@example.com', password: 'password123' });
});Sichtbarkeit prüfen
Matcher von jest-dom wie toBeInTheDocument(), toBeVisible() und toHaveValue() machen Prüfungen gut lesbar.
expect(screen.getByText('Error: required')).toBeInTheDocument();
expect(screen.getByRole('dialog')).toBeVisible();
expect(screen.getByRole('textbox')).toHaveValue('hello');
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();Bedingtes Rendern testen
Verwenden Sie queryBy (gibt bei Abwesenheit null zurück), um zu prüfen, dass ein Element nicht gerendert wird. Verwenden Sie getBy, wenn Sie dessen Vorhandensein erwarten.
test('shows error message when validation fails', async () => {
const user = userEvent.setup();
render(<SignUpForm />);
await user.click(screen.getByRole('button', { name: /submit/i }));
expect(screen.getByText('Email is required')).toBeInTheDocument();
});Mit Providern umschließen
Die meisten Komponenten benötigen einen Context oder Router. Umschließen Sie sie innerhalb des render-Aufrufs mit Providern oder erstellen Sie eine benutzerdefinierte renderWithProviders-Hilfsfunktion.
function renderWithProviders(ui: React.ReactElement) {
return render(
<QueryClientProvider client={new QueryClient()}>
<MemoryRouter>
{ui}
</MemoryRouter>
</QueryClientProvider>
);
}
test('shows user data', () => {
renderWithProviders(<UserProfile />);
});Zustandsänderungen testen
Führen Sie eine Aktion an der Komponente aus und prüfen Sie anschließend, ob der neue Zustand in der UI angezeigt wird. RTL umschließt die meisten Interaktionen bei Verwendung von userEvent automatisch mit act.
test('counter increments', async () => {
const user = userEvent.setup();
render(<Counter />);
expect(screen.getByText('Count: 0')).toBeInTheDocument();
await user.click(screen.getByRole('button', { name: /increment/i }));
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});screen-Debug-Hilfe
Rufen Sie screen.debug() auf, um das aktuell gerenderte HTML in der Konsole auszugeben — nützlich, wenn eine Query fehlschlägt und Sie sehen müssen, was tatsächlich gerendert wurde.
test('debugging a failing query', () => {
render(<MyComponent />);
screen.debug(); // prints rendered HTML
screen.getByRole('button', { name: /save/i }); // then inspect output
});Kurztest
Welche Query sollten Sie beim Testen eines Buttons mit React Testing Library bevorzugen?
Zusammenfassung
RTL-Tests rendern Komponenten und interagieren mit ihnen über rollenbasierte Queries und userEvent. Umschließen Sie Komponenten mit den erforderlichen Providern, verwenden Sie jest-dom-Matcher für gut lesbare Prüfungen und bevorzugen Sie queryBy, wenn Sie die Abwesenheit eines Elements prüfen.
Lerne React mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 88
- Lektionen
- 324
Häufig gestellte Fragen
Ist die Lektion „Integrationstests mit React Testing Library“ kostenlos?
Ja — der vollständige Text von „Integrationstests mit React Testing Library“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Integrationstests mit React Testing Library“?
Rendern Sie Components in Tests, lösen Sie Events aus und prüfen Sie sichtbare Ausgaben statt Implementierungsdetails. Du übst React 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 React Academy zu starten?
Keine Vorkenntnisse erforderlich. React 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 1 von 4.
Wie lange dauert die Lektion „Integrationstests mit React Testing Library“?
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 React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React 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
- Integrationstests mit React Testing Library
- Asynchrone UIs und API-Aufrufe mit MSW testen
- Erste Schritte mit Playwright für React
- Formulare und Benutzerabläufe von Anfang bis Ende testen