javascript / intermediate
Snippet
Testen asynchroner Formularübertragungen mit User-Event und FindBy-Abfragen
Das userEvent-Paket der Testing Library simuliert reale Browser-Ereignisse asynchron, inklusive Fokus, Tastenanschlägen und Klick-Weiterleitung. Durch async/await in Kombination mit findBy-Abfragen warten Tests zuverlässig auf DOM-Updates nach aufgelösten Promises.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { render, screen } from '@testing-library/react';import userEvent from '@testing-library/user-event';import { FeedbackForm } from './FeedbackForm';test('submits feedback comment and displays confirmation message', async () => {const user = userEvent.setup();const mockOnSubmit = jest.fn().mockResolvedValue({ status: 'ok' });render(<FeedbackForm onSubmit={mockOnSubmit} />);const inputField = screen.getByRole('textbox', { name: /feedback/i });const submitButton = screen.getByRole('button', { name: /send/i });await user.type(inputField, 'Great developer experience!');await user.click(submitButton);expect(mockOnSubmit).toHaveBeenCalledWith('Great developer experience!');const confirmation = await screen.findByText(/thank you for your feedback/i);expect(confirmation).toBeInTheDocument();});
react
Erklärung
1
const user = userEvent.setup();
Initialisiert die user-event-Instanz vor der Ausführung realistischer Browser-Aktionen.
2
await user.type(inputField, 'Great developer experience!');
Simuliert asynchron einzelne Tastendrücke, Eingabe-Events und Zustandsänderungen.
3
expect(mockOnSubmit).toHaveBeenCalledWith('Great developer experience!');
Prüft, ob der Callback beim Absenden mit dem vollständigen Eingabewert aufgerufen wurde.
4
const confirmation = await screen.findByText(/thank you for your feedback/i);
Wartet asynchron auf das Erscheinen der Bestätigungsnachricht im DOM nach dem Status-Update.