javascript / beginner
Snippet
Simulieren von Benutzer-Klick-Ereignissen mit fireEvent in Komponententests
Komponententests überprüfen interaktives Verhalten, indem sie künstliche DOM-Ereignisse auf gerenderten Elementen auslösen und sicherstellen, dass Updater-Funktionen die erwarteten Änderungen bewirken.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';import { render, screen, fireEvent } from '@testing-library/react';function CounterButton() {const [count, setCount] = React.useState(0);return (<button onClick={() => setCount((prev) => prev + 1)}>Clicked {count} times</button>);}test('increments click count on button press', () => {render(<CounterButton />);const buttonElement = screen.getByRole('button');fireEvent.click(buttonElement);expect(buttonElement).toHaveTextContent('Clicked 1 times');});
react
Erklärung
1
fireEvent.click(buttonElement);
Löst ein Klick-Ereignis aus, um die verknüpfte onClick-Handler-Funktion auszuführen.
2
expect(buttonElement).toHaveTextContent('Clicked 1 times');
Überprüft, ob der DOM-Knoten des Buttons den aktualisierten State-Wert anzeigt.