--- skill: add-test description: Add unit tests for a component or function arguments: component or function name --- # Add Tests: $ARGUMENTS Create comprehensive unit tests for the specified component or function. ## Process ### 1. Locate Source File Search in order: - `components/$ARGUMENTS.tsx` (React component) - `lib/$ARGUMENTS.ts` (utility function) - `app/$ARGUMENTS.tsx` (page component) ### 2. Analyze Source Read the file to identify: - Exported functions/components - Props interfaces - State management - Event handlers - Key functionality to test ### 3. Create Test File Place test adjacent to source: `[name].test.tsx` or `[name].test.ts` ### 4. Generate Tests **For React components:** ```typescript import { render, screen, fireEvent } from '@testing-library/react'; import ComponentName from './ComponentName'; describe('ComponentName', () => { test('renders correctly', () => { render(); expect(screen.getByTestId('component-name')).toBeInTheDocument(); }); test('handles user interaction', () => { render(); fireEvent.click(screen.getByRole('button')); // assert expected behavior }); test('handles empty state', () => { /* ... */ }); test('handles error state', () => { /* ... */ }); }); ``` **For utility functions:** ```typescript import { functionName } from './fileName'; describe('functionName', () => { test('returns expected output', () => { expect(functionName(input)).toBe(expected); }); test('handles empty input', () => { /* ... */ }); test('handles edge cases', () => { /* ... */ }); test('throws on invalid input', () => { expect(() => functionName(invalid)).toThrow(); }); }); ``` ### 5. Run Tests ```bash npm test -- $ARGUMENTS.test ``` Fix any failures, then report results. ## Coverage Requirements - Happy path scenarios - Edge cases (empty, null, boundary values) - Error states - User interactions (for components) - Accessibility (keyboard navigation) ## Best Practices - Use `data-testid` for stable selectors - Mock localStorage if needed - Tests should be independent and deterministic - Descriptive test names that explain the scenario