javascript / intermediate
Snippet
Validierung asynchroner UI-Zustandsübergänge mit Vitest und Testing Library
Das Testen asynchroner Komponenten erfordert das Mocken asynchroner Handler und das Abwarten von DOM-Änderungen. Vitest stellt Mock-Funktionen bereit, während die waitFor-Polling-Hilfsfunktion von Testing Library sicherstellt, dass Zustandsübergänge und Re-Renderings ohne künstliche Timer abgeschlossen werden.
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 { render, screen, waitFor } from '@testing-library/react';import userEvent from '@testing-library/user-event';import { describe, it, expect, vi } from 'vitest';import { AsyncDataLoader } from './AsyncDataLoader';describe('AsyncDataLoader Component', () => {it('transitions from loading state to resolved content on button click', async () => {const user = userEvent.setup();const mockFetcher = vi.fn().mockResolvedValue({ payload: 'Active' });render(<AsyncDataLoader loadData={mockFetcher} />);const actionButton = screen.getByRole('button', { name: /load records/i });await user.click(actionButton);expect(screen.getByText(/syncing/i)).toBeInTheDocument();await waitFor(() => {expect(screen.getByText(/status: active/i)).toBeInTheDocument();});expect(mockFetcher).toHaveBeenCalledTimes(1);});});
react
Erklärung
1
const mockFetcher = vi.fn().mockResolvedValue({ payload: 'Active' });
Erstellt eine gemockte asynchrone Funktion, die ein aufgelöstes Promise mit Testdaten zurückgibt.
2
await user.click(actionButton);
Simuliert echte Benutzerinteraktionen asynchron mit userEvent.
3
await waitFor(() => {
Wiederholt die Assertion periodisch, bis die asynchrone Zustandsaktualisierung gerendert ist oder ein Timeout auftritt.