javascript / beginner
Snippet
Simulieren von Button-Klicks mit der React Testing Library
Die React Testing Library ermöglicht es Entwicklern, Benutzerinteraktionen auf gerenderten Komponenten zu simulieren. Durch die Verwendung einer Mock-Funktion mit jest.fn() und das Auslösen von Ereignissen mit fireEvent.click können Sie überprüfen, ob Event-Handler wie erwartet aufgerufen werden, wenn Benutzer auf eine Schaltfläche klicken.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
import { render, screen, fireEvent } from '@testing-library/react';import CounterButton from './CounterButton';test('calls onClick handler when clicked', () => {const handleClick = jest.fn();render(<CounterButton onClick={handleClick} label="Increment" />);const buttonElement = screen.getByRole('button', { name: /increment/i });fireEvent.click(buttonElement);expect(handleClick).toHaveBeenCalledTimes(1);});
react
Erklärung
1
const handleClick = jest.fn();
Erstellt eine Jest-Mock-Funktion, um nachzuverfolgen, ob und wie oft sie aufgerufen wurde.
2
render(<CounterButton onClick={handleClick} label="Increment" />);
Rendert die Komponente für den Test in einen virtuellen DOM-Container.
3
const buttonElement = screen.getByRole('button', { name: /increment/i });
Findet das gerenderte Button-Element anhand seiner Barrierefreiheits-Rolle und Textbeschriftung.
4
fireEvent.click(buttonElement);
Löst ein DOM-Klickereignis auf dem Ziel-Button-Element aus.
5
expect(handleClick).toHaveBeenCalledTimes(1);
Prüft, ob die Mock-Funktion infolge des Klicks genau einmal aufgerufen wurde.