Unit Test Automation

---

name: setup-unit-test description: > One-click initialization of an AI-driven unit testing environment for frontend projects (supports React/Vue/pure TypeScript/Next.js). Automatically detects project framework, installs Vitest + Testing Library + MSW, generates config files, and injects Claude Code custom commands for cross-project reuse.

Trigger scenarios: (1) Need to initialize unit testing in a new or existing project. (2) User says "initialize unit tests", "configure test environment", or "setup unit test". (3) Need to enable /gen-unit-test and other AI test generation commands in the project. (4) Need a single command to set up test configurations across multiple tech stacks (React/Vue/Next.js/TS).

---

Security & Permissions Statement

This skill performs the following privileged operations to automate test environment configuration:

File System: Reads package.json and writes config files (vitest.config.ts, .claude/commands/*.md).

Shell Execution: Runs npm/yarn/pnpm commands to install dependencies, and runs git commands to detect staged files.

Git Hooks: Initializes Husky and modifies .husky/pre-commit to automate the testing workflow.

All scripts run locally and will not transmit project data to external servers (unless explicitly sent to Claude via a command invocation).

---

Initialize Unit Testing Environment

One-click setup of a production-grade unit testing solution for any frontend project. Detect environment → Install enhanced plugins → Auto alias resolution → AI command injection.

Workflow

Step 1: Detect Project Environment

Run the detection script to identify project details:

node /scripts/detect-framework.mjs 

Returns JSON containing: os, framework, isNext, typescript, hasTsConfig, packageManager, hasGit, hasVitest, etc.

Step 2: Install Enhanced Dependencies

Install dev dependencies (-D) using the corresponding package manager. Skip already-installed dependencies.

Core Toolchain:

vitest

@vitest/ui (visual test interface)

@vitest/coverage-v8 (code coverage)

jsdom (browser environment simulation)

msw (API network request mocking)

vitest-tsconfig-paths (auto-resolve path aliases from tsconfig.json)

Additional for React/Next.js projects:

@testing-library/react

@testing-library/jest-dom

@testing-library/user-event

@vitejs/plugin-react

Additional for Vue projects:

@testing-library/vue

@testing-library/jest-dom

@testing-library/user-event

@vitejs/plugin-vue

Step 3: Generate Smart Config Files

#### vitest.config.ts

Uses the tsconfigPaths() plugin for "zero-config alias resolution".

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'
import tsconfigPaths from 'vitest-tsconfig-paths'
export default defineConfig({
  plugins: [
    tsconfigPaths(),
    // react(), // Enable for React/Next.js projects
    // vue(),   // Enable for Vue projects
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    include: ['tests/unit/**/*.test.{ts,tsx}'],
    setupFiles: ['./tests/unit/setup/index.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'json-summary'],
      include: ['src/**/*.{ts,tsx,vue}'],
      exclude: ['src//*.stories.*', 'src//*.d.ts'],
      thresholds: { statements: 70, branches: 70, functions: 70, lines: 70 },
    },
    // Additional config for Next.js server component mocking can be added here
  },
})

#### tests/unit/setup/index.ts

import '@testing-library/jest-dom/vitest'
import { afterAll, afterEach, beforeAll, vi } from 'vitest'
import { server } from './msw-server'
// Global Mock example (e.g., Next.js Router)
// vi.mock('next/navigation', () => ({ useRouter: () => ({ push: vi.fn() }) }))
beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }))
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

Step 4: Inject AI Commands (Cross-Project Reuse)

Write prompt templates to the project's .claude/commands/:

gen-unit-test.md: Core test generation instructions.

fix-test.md: Automated failure repair instructions.

Step 5: Automation Integration (Git Hooks)

#### 5.1 Install Husky & lint-staged #### 5.2 Copy check-missing-tests.mjs #### 5.3 Write .husky/pre-commit (dual-layer guard)

Layer 1: vitest related --run (only run tests affected by the current changes).

Layer 2: When AUTO_GEN_TEST=1, detect missing tests and invoke Claude Code to auto-generate them.

Step 6: Verification & Summary Output

Initialization complete:
Framework:       [detection result] (Next.js compatible)
Alias resolution: Enabled (vitest-tsconfig-paths)
Visual UI:       Enabled (npm run test:ui)
Coverage threshold: 70% (manually adjustable in vitest.config.ts)
AI automation:   Injected /gen-unit-test and /fix-test commands
Auto-generation: Disabled by default, enable via export AUTO_GEN_TEST=1

Resource Files

scripts/detect-framework.mjs — Environment detection script (with OS and Next.js detection)

scripts/check-missing-tests.mjs — Cross-platform path-compatible test checking script

references/gen-unit-test-prompt.md

references/fix-test-prompt.md