Mocking Component Events with React Testing Library and Vitest

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);
  });
});