javascript / beginner
Snippet
Simulation von Klick-Ereignissen in Komponenten-Tests
Die Verwendung der React Testing Library zusammen mit userEvent ermöglicht das Testen von Komponenten-Interaktionen in einer automatisierten Testumgebung. Es simuliert echte Mausklicks und überprüft die Aktualisierung der UI.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
import { render, screen } from '@testing-library/react';import userEvent from '@testing-library/user-event';import Counter from './Counter';test('increments counter on button click', async () => {render(<Counter />);const button = screen.getByRole('button', { name: /increment/i });await userEvent.click(button);expect(screen.getByText(/count: 1/i)).toBeInTheDocument();});
react
Erklärung
1
render(<Counter />);
Rendert die Counter-Komponente in ein virtuelles DOM für den Testlauf.
2
const button = screen.getByRole('button', { name: /increment/i });
Sucht im gerenderten Dokument nach einer barrierefreien Schaltfläche anhand ihres Namens.
3
await userEvent.click(button);
Simuliert ein asynchrones Klick-Ereignis des Benutzers auf den Button.
4
expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
Prüft mittels Assertion, ob der aktualisierte Zählertext im DOM angezeigt wird.