Testing & CI/CD Initialization

When to Use

• Adding tests to a project without test coverage
• Setting up GitHub Actions CI/CD for the first time
• Configuring Vitest with coverage thresholds
• Initializing testing infrastructure for a new project
• Migrating from Jest to Vitest

What It Does

1. Detects project type (Next.js, NestJS, React, Node.js)
2. Adds Vitest configuration with appropriate settings
3. Creates test setup files for the environment
4. Adds GitHub Actions workflow for CI/CD
5. Configures 80% coverage thresholds
6. Adds test scripts to package.json
7. Installs required dependencies

Project Type Detection

• package.json

  dependencies (next, @nestjs/core, react, etc.)
• Config files (next.config.*, nest-cli.json, etc.)
• Directory structure (app/, src/, pages/, etc.)

Quick Start

Add testing and CI/CD to this project

Set up Vitest with 80% coverage and GitHub Actions for this Next.js project

Configuration by Project Type

Next.js Projects

bun add -D vitest @vitest/coverage-v8 @vitejs/plugin-react @testing-library/react @testing-library/jest-dom jsdom

• vitest.config.ts

  - Vitest with jsdom environment

• src/test/setup.ts

  - Test setup with RTL matchers

• .github/workflows/ci.yml

  - CI pipeline

**/*.{test,spec}.{ts,tsx}

NestJS Projects

bun add -D vitest @vitest/coverage-v8 supertest @types/supertest

• vitest.config.ts

  - Vitest with node environment

• test/setup.ts

  - Test setup for NestJS

• .github/workflows/ci.yml

  - CI with MongoDB service

src/**/*.spec.ts

React/Node.js Projects

Coverage Configuration

• Lines: 80%
• Functions: 80%
• Branches: 75%
• Statements: 80%

1. In pre-commit hooks (via Husky)
2. In CI/CD pipeline (GitHub Actions)

GitHub Actions Features

• Bun setup with caching
• Dependency installation
• Lint/format checking (Biome)
• TypeScript type checking
• Test execution with coverage
• Build verification
• MongoDB service (for NestJS projects)

Templates

templates/

vitest.config.nextjs.ts

vitest.config.nestjs.ts

ci-nextjs.yml

ci-nestjs.yml

test-setup-react.ts

test-setup-node.ts

Monorepo Support

1. Creates

   vitest.workspace.ts

   at root
2. Creates individual

   vitest.config.ts

   per package
3. Creates root-level GitHub Actions workflow
4. Uses

   bun --filter '*' test

   for orchestration

Integration with Other Skills

husky-test-coverage

linter-formatter-init

playwright-e2e-init

testing-expert

Example Usage

Adding tests to a Next.js project

User: Add testing to this project

Claude:
1. Detects Next.js from package.json
2. Installs vitest, @vitest/coverage-v8, @testing-library/react
3. Creates vitest.config.ts with jsdom environment
4. Creates src/test/setup.ts
5. Creates .github/workflows/ci.yml
6. Adds test scripts to package.json

Adding tests to a NestJS API

User: Set up tests for this NestJS API

Claude:
1. Detects NestJS from @nestjs/core dependency
2. Installs vitest, @vitest/coverage-v8, supertest
3. Creates vitest.config.ts with node environment
4. Creates test/setup.ts
5. Creates .github/workflows/ci.yml with MongoDB service
6. Adds test scripts to package.json

Troubleshooting

Tests not finding modules

vitest.config.ts

tsconfig.json

resolve: {
  alias: {
    "@": path.resolve(__dirname, "./src"),
  },
},

Coverage below threshold

1. Check coverage report:

   bun test --coverage

2. Identify uncovered lines
3. Add tests or adjust thresholds temporarily

CI failing on type errors

bunx tsc --noEmit

Best Practices

1. Start with unit tests for utilities and services
2. Add integration tests for API endpoints
3. Use E2E tests sparingly for critical flows
4. Run tests before commits via Husky
5. Monitor coverage trends in CI

1. Detect the project type automatically
2. Install appropriate testing dependencies
3. Create properly configured test files
4. Set up GitHub Actions CI/CD
5. Configure coverage thresholds
6. Add test scripts to package.json