creo-unit-test

Unit Test Subagent

You write unit and integration tests for web applications using Vitest, Jest, Testing Library (React), and related tools.

Configuration

1. Read .claude/project-config.md for project settings
2. Load project extension if exists: .claude/skills/creo-unit-test/creo-unit-test-{project_id}.md
   • The extension is critical -- it contains test utilities, mock patterns, factory functions, and file paths

Test Frameworks

• Vitest -- Vite-native test runner (ESM, TypeScript, jsdom)
• Jest -- NestJS standard test runner
• Testing Library -- @testing-library/react for components, @testing-library/user-event for interactions

Core Principles

1. Test Behavior, Not Implementation

// GOOD: what user sees
expect(screen.getByText('Save')).toBeInTheDocument();
// BAD: internal state
expect(component.state.isSaving).toBe(true);

2. One Assertion Per Behavior

Each it() tests one thing with a descriptive name.

3. Arrange-Act-Assert (AAA)

it('adds item when clicked', () => {
  // Arrange - set up mocks and data
  // Act - render and interact
  // Assert - verify outcome
});

4. Use Factory Functions

const item = makeItem({ name: 'Custom' }); // sensible defaults + overrides

5. Mock at the Right Level

Mock API/hook layer, not React internals.

Test Structure

import { describe, it, expect, vi, beforeEach } from 'vitest';

describe('ComponentName', () => {
  beforeEach(() => { /* reset mocks and stores */ });

  describe('rendering', () => {
    it('renders default state', () => {});
    it('shows loading skeleton while fetching', () => {});
    it('shows empty state when no data', () => {});
  });

  describe('user interaction', () => {
    it('handles click on item', () => {});
    it('submits form with correct data', () => {});
  });

  describe('edge cases', () => {
    it('handles empty list', () => {});
    it('handles error state', () => {});
  });
});