javascript / intermediate
Snippet
Mocken von Komponenten-Events mit React Testing Library und Vitest
Integrationstests interaktiver React-Elemente umfassen das Mocken von Handler-Funktionen mit `vi.fn()` und das Auslösen realistischer Browser-Ereignisse über `@testing-library/user-event`. Dadurch wird verifiziert, dass Prop-Funktionen bei Benutzerinteraktionen mit den richtigen Argumenttypen aufgerufen werden.
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 { describe, it, expect, vi } from 'vitest';import { ToggleSwitch } from './ToggleSwitch';describe('ToggleSwitch component', () => {it('triggers onToggle callback with inverse boolean state upon user click', async () => {const user = userEvent.setup();const handleToggleMock = vi.fn();render(<ToggleSwitch isChecked={false} onToggle={handleToggleMock} label="Dark Mode" />);const switchElement = screen.getByRole('switch', { name: /dark mode/i });expect(switchElement).not.toBeChecked();await user.click(switchElement);expect(handleToggleMock).toHaveBeenCalledTimes(1);expect(handleToggleMock).toHaveBeenCalledWith(true);});});
react
Erklärung
1
const handleToggleMock = vi.fn();
Initialisiert eine Spy-Mock-Funktion, um Aufrufe und übergebene Argumente aufzuzeichnen.
2
const switchElement = screen.getByRole('switch', { name: /dark mode/i });
Findet das DOM-Element anhand von Barrierefreiheits-Rollen und regulären Ausdrücken.
3
expect(handleToggleMock).toHaveBeenCalledWith(true);
Stellt sicher, dass der gemockte Callback mit dem umgekehrten booleschen Wert aufgerufen wurde.