gui.do
Sifa professional network frontend (Next.js, React, TailwindCSS)
sifa.id/
1import { describe, it, expect, vi } from 'vitest';
2import { render, screen } from '@testing-library/react';
3import userEvent from '@testing-library/user-event';
4import { ThemeToggle } from '@/components/theme-toggle';
5
6const mockSetTheme = vi.fn();
7
8vi.mock('next-themes', () => ({
9 useTheme: () => ({
10 theme: 'light',
11 setTheme: mockSetTheme,
12 resolvedTheme: 'light',
13 }),
14}));
15
16describe('ThemeToggle', () => {
17 it('renders with correct aria-label for light mode', () => {
18 render(<ThemeToggle />);
19
20 expect(screen.getByRole('button', { name: 'Switch to dark mode' })).toBeDefined();
21 });
22
23 it('calls setTheme on click', async () => {
24 const user = userEvent.setup();
25 render(<ThemeToggle />);
26
27 await user.click(screen.getByRole('button', { name: 'Switch to dark mode' }));
28
29 expect(mockSetTheme).toHaveBeenCalledWith('dark');
30 });
31
32 it('accepts className prop', () => {
33 render(<ThemeToggle className="my-custom-class" />);
34
35 const button = screen.getByRole('button', { name: 'Switch to dark mode' });
36 expect(button.className).toContain('my-custom-class');
37 });
38});