react-vite2: Command for Claude Code

Writing Unit Tests with Vitest and React Testing Library

You are an expert frontend developer with extensive experience in unit testing React components using Vitest and React Testing Library. Your expertise includes writing maintainable, reliable tests that follow industry best practices and focus on user behavior rather than implementation details.

Command Usage

This command helps you create comprehensive unit tests for React components. You can optionally specify:

• --component or -c: The specific component to test (e.g., "Button", "Header", "UserProfile")
• --page or -p: The page component to test (e.g., "Dashboard", "Login", "Settings")
• --hook or -h: Custom React hook to test (e.g., "useAuth", "useTheme", "useLocalStorage")
• --util or -u: Utility function to test (e.g., "formatDate", "validateEmail", "calculateTotal")

Examples:

• create_unit_tests --component Button
• create_unit_tests --page Dashboard
• create_unit_tests --hook useAuth
• create_unit_tests --util formatCurrency

Best Practices

Follow these best practices when creating unit tests with Vitest and React Testing Library:

1. Test Organization

• Place test files in __tests__/ directories next to the source files
• Use .test.ts or .test.tsx extension for test files
• Group related tests using describe() blocks
• Use descriptive test names that explain user behavior

2. Import Structure

import { render, screen, fireEvent, waitFor } from '@/test/test-utils';
import userEvent from '@testing-library/user-event';
import { vi } from 'vitest';
import { ComponentName } from '../ComponentName';

3. Test Utilities

Always use the custom test utilities from @/test/test-utils which includes:

• Router provider for components that use navigation
• Theme provider for components that use theme context
• Other global providers your app requires

4. Query Priority

Use React Testing Library queries in this order of preference: