javascript / intermediate
Snippet
Testen des asynchronen Datenabrufs in React-Komponenten
Asynchrone Komponenten-Integrationstests erfordern die Kombination von screen.findBy-Abfragen mit gemockten Promises. findByRole pollt den DOM im Hintergrund und wartet, bis die asynchrone Zustandsänderung abgeschlossen ist und das UI aktualisiert wurde.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from 'react';import { render, screen } from '@testing-library/react';import { UserProfile } from './UserProfile';describe('UserProfile Async Component', () => {it('renders loading state and then resolves async user data', async () => {const mockFetch = jest.spyOn(global, 'fetch').mockResolvedValueOnce({ok: true,json: async () => ({ id: 101, name: 'Alice Developer' }),});render(<UserProfile userId={101} />);expect(screen.getByText(/loading/i)).toBeInTheDocument();const resolvedHeading = await screen.findByRole('heading', {name: 'Alice Developer',});expect(resolvedHeading).toBeInTheDocument();mockFetch.mockRestore();});});
react
Erklärung
1
const mockFetch = jest.spyOn(global, 'fetch').mockResolvedValueOnce({
Mockt die globale fetch-API, um eine asynchrone Serverantwort ohne echten Netzwerkverkehr zu simulieren.
2
expect(screen.getByText(/loading/i)).toBeInTheDocument();
Prüft synchron, ob der anfängliche Ladezustand für den Benutzer sichtbar gerendert wird.
3
const resolvedHeading = await screen.findByRole('heading', {
Wartet asynchron auf das Auflösen des Promises und das Rendern des aktualisierten Überschriften-Elements.
4
mockFetch.mockRestore();
Stellt die originale fetch-Implementierung wieder her, um Seiteneffekte zwischen Tests zu verhindern.