javascript / intermediate
Snippet
Mocking Component Events with React Testing Library and Vitest
Integration testing of interactive React elements involves mocking handler functions with `vi.fn()` and dispatching realistic browser events via `@testing-library/user-event`. This verifies that child component prop invocations receive the correct argument types upon user interactions.
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
Breakdown
1
const handleToggleMock = vi.fn();
Initializes a spy mock function to intercept and record invocations and passed arguments.
2
const switchElement = screen.getByRole('switch', { name: /dark mode/i });
Queries the DOM element using accessible role attributes and regular expression name matching.
3
expect(handleToggleMock).toHaveBeenCalledWith(true);
Asserts that the mocked callback was called with the toggled boolean argument.