javascript / beginner
Snippet
Simulation von Button-Klick-Ereignissen in Komponenten-Tests
Komponententests überprüfen Benutzerinteraktionen, indem Komponenten in einem virtuellen DOM gerendert und synthetische Ereignisse ausgelöst werden. 'fireEvent.click' simuliert Klicks und löst interne Zustandsänderungen zur Überprüfung aus.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { render, fireEvent } from '@testing-library/react';import React, { useState } from 'react';function Counter() {const [val, setVal] = useState(0);return <button onClick={() => setVal(val + 1)}>Count: {val}</button>;}test('increments value on user click', () => {const { getByText } = render(<Counter />);const button = getByText('Count: 0');fireEvent.click(button);expect(button.textContent).toBe('Count: 1');});
react
Erklärung
1
const { getByText } = render(<Counter />);
Rendert die Counter-Komponente und stellt die Hilfsmethode zur Elementabfrage anhand des sichtbaren Textes bereit.
2
fireEvent.click(button);
Simuliert ein Klick-Ereignis des Nutzers auf das gefundene Button-Element.
3
expect(button.textContent).toBe('Count: 1');
Prüft via Assertion, ob der Textinhalt des Buttons den erhöhten Zählerstand anzeigt.