Component Test

Component Test Generator

Generate tests for React components, hooks, and contexts by analyzing source code. This skill locates targets, discovers edge cases, and produces production-grade Vitest tests.

Usage: /component-test then provide one of:

• HTML element from DevTools
• Hook name (e.g., useFileOperations)
• Context name (e.g., ThemeContext)
• File path (e.g., src/components/FileExplorer/index.tsx)

Technology Stack

• Testing: Vitest + React Testing Library
• State: Zustand for state management
• Backend: Tauri 2 for commands, events, and system APIs
• Types: TypeScript throughout
• Routing: React Router or TanStack Router (detect from imports)
• Possible: ReactFlow, dnd-kit, react-window, Framer Motion

Two-Phase Workflow

Phase 1: Analysis

Identify target, read code, classify, discover edge cases, plan tests. Output analysis and wait for user to reply "proceed".

Phase 2: Generation

Write test files based on approved plan, including edge case coverage.

Phase 1: Analysis Instructions

Step 1: Identify the Test Target

Determine what you're testing based on input:

If multiple files match or no match found, request clarification.

Step 2: Read and Quote Behavior Code

Read the target file and its direct dependencies (custom hooks from src/, Zustand stores, contexts).

Quote behavior-proving code based on target type:

Skip third-party hooks and utility hooks (useDebounce, useLocalStorage).

Step 3: Discover Edge Cases

Read references/edge-case-patterns.md for comprehensive edge case lists by category.

Analyze the code for edge cases. Check all applicable categories:

Data Edge Cases:

• Empty arrays/objects, null, undefined
• Single item vs multiple items
• Maximum lengths, large datasets
• Special characters (unicode, spaces, path separators)
• Numeric boundaries (0, negative, MAX_SAFE_INTEGER, NaN)
• Invalid/malformed data from backend

State Edge Cases:

• Initial state before data loads
• Loading states and transitions
• Error states and recovery
• Rapid state changes (double-clicks, debounce)
• Stale state after unmount

Async Edge Cases:

• Network failures / Tauri command rejections
• Slow responses (loading indicators, timeouts)
• Out-of-order responses
• Retry logic

Interaction Edge Cases:

• Disabled states
• Keyboard navigation boundaries
• Repeated rapid interactions
• Interaction during loading
• Touch vs mouse (if applicable)

Accessibility Edge Cases:

• Focus management (trap, restore, initial)
• Screen reader announcements
• Keyboard-only navigation
• Reduced motion preferences

Router Edge Cases:

• Direct URL access (deep linking)
• Back/forward navigation
• Route params (missing, malformed)
• Protected route redirects
• Concurrent navigation

Drag and Drop Edge Cases:

• Drop on invalid target
• Cancel mid-drag (Escape)
• Drag outside container
• Keyboard drag mode

Virtualization Edge Cases:

• Scroll to specific item
• Dynamic item heights
• Empty list, single item
• Rapid scrolling

Animation Edge Cases:

• Reduced motion preference
• Animation interrupt
• Unmount during animation

For each edge case found, note the relevant code line that handles it (or mark as unhandled).

Step 4: Check Testability

Flag for refactoring if:

• Component >400 lines WITH useEffect calling external APIs AND >5 return statements
• useEffect with no dependency array that calls setState
• Store action called in render body (outside handler/effect)
• Imports from >3 different Zustand stores
• Hook does both data fetching AND UI state management
• Context Provider has >200 lines of logic

If flagged, output the specific file:line and suggest a concrete refactor.

Step 5: Classify and Select Test Types

Target Classifications:

Test Type Selection:

Additional Test Types (add when applicable):

Step 6: List Testable Behaviors

Format: [Trigger] → [Expected outcome] → [Pattern: sync/async/cleanup/error/a11y]

Organize into groups:

1. Core Behaviors — Primary happy-path functionality
2. Edge Cases — Boundary conditions by category
3. Accessibility — Focus, ARIA, keyboard navigation
4. Performance — Render counts, memoization (if applicable)

Mark edge cases with category: [EDGE: data], [EDGE: async], [EDGE: a11y], etc.

Fast Path: For PRESENTATIONAL components <50 lines with ≤3 conditional renders, skip detailed analysis.

Phase 2: Generate Tests

Read references/test-examples.md for code templates and mock patterns for all test types.

File Locations

Test Organization

describe('TargetName', () => {
  describe('core functionality', () => {
    // happy path tests
  });

  describe('edge cases: [category]', () => {
    // boundary tests
  });

  describe('accessibility', () => {
    // a11y tests
  });

  describe('performance', () => {
    // render count, memoization tests
  });
});

Validation Pass

Validate each test:

• Test type matches mocking strategy
• Classification rules followed
• Edge cases target specific documented boundaries
• A11y tests use correct queries and assertions
• Performance tests have clear thresholds

Classification Enforcement

Required Imports

// Core
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { render, screen, waitFor, within, act, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

// Hooks
import { renderHook } from '@testing-library/react';

// Routing
import { createMemoryRouter, RouterProvider } from 'react-router-dom';

// Accessibility
import { axe, toHaveNoViolations } from 'jest-axe';

// Performance
import { Profiler } from 'react';

Phase 1 Output Format

## Target Identified

[Type]: [Name] at [path]

## Behavior Code

├── file:line — "quoted code" └── file:line — "quoted code"

## Dependencies
- Tauri: [commands/events or "None"]
- Stores: [stores or "None"]
- Contexts: [contexts or "None"]
- Router: [yes/no]

## Edge Cases Identified

| Category | Edge Case | Code Reference | Handled? |
|----------|-----------|----------------|----------|
| [cat] | [description] | [file:line or —] | ✓/? |

## Classification
[TYPE] — [justification]

## Test Types
[list with justification]

## Planned Files
[list with test type]

## Mock Requirements
[structured by category]

## Behaviors

### [TEST TYPE] — Core
1. [trigger] → [outcome] → [pattern]

### [TEST TYPE] — Edge Cases
N. [EDGE: category] [trigger] → [outcome] → [pattern]

### Accessibility (if applicable)
N. [trigger] → [outcome] → [a11y]

---
Phase 1 complete. Reply "proceed" to generate tests.

Phase 2 Output Format

## Validation

[✓/✗ for each test]

## Test Files

### [filename]

```typescript
[full code with organized describe blocks]
```

---

## References

- `references/edge-case-patterns.md` — Comprehensive edge cases by component/category type
- `references/test-examples.md` — Code templates for all test types (unit, integration, hook, context, a11y, router, DnD, virtualization, animation, performance, snapshot, Tauri system)