testing-cicd-init

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Testing & CI/CD Initialization

测试与CI/CD初始化

Automatically sets up comprehensive test infrastructure for TypeScript projects including Vitest, coverage thresholds, and GitHub Actions CI/CD.

自动为TypeScript项目搭建全面的测试基础设施，包括Vitest、覆盖率阈值以及GitHub Actions CI/CD。

When to Use

适用场景

This skill should be used when:

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

在以下场景中使用此技能：

为无测试覆盖率的项目添加测试
首次搭建GitHub Actions CI/CD
配置带覆盖率阈值的Vitest
为新项目初始化测试基础设施
从Jest迁移至Vitest

What It Does

功能说明

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

检测项目类型（Next.js、NestJS、React、Node.js）
添加Vitest配置并设置合适的参数
创建测试环境设置文件
添加GitHub Actions工作流以实现CI/CD
配置80%的覆盖率阈值
在package.json中添加测试脚本
安装所需依赖

Project Type Detection

项目类型检测

The skill detects project type by scanning:

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

该技能通过扫描以下内容检测项目类型：

```
package.json
```
中的依赖项（next、@nestjs/core、react等）
配置文件（next.config.*、nest-cli.json等）
目录结构（app/、src/、pages/等）

Quick Start

快速开始

Ask Claude to:

Add testing and CI/CD to this project

Or be specific:

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

让Claude执行：

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

Next.js项目

Dependencies installed:

bash

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

Files created:

```
vitest.config.ts
```
- Vitest with jsdom environment
```
src/test/setup.ts
```
- Test setup with RTL matchers
```
.github/workflows/ci.yml
```
- CI pipeline

Test pattern:

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

安装的依赖项：

bash

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

创建的文件：

```
vitest.config.ts
```
- 配置jsdom环境的Vitest
```
src/test/setup.ts
```
- 包含RTL匹配器的测试设置文件
```
.github/workflows/ci.yml
```
- CI流水线

测试匹配规则：

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

NestJS Projects

NestJS项目

Dependencies installed:

bash

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

Files created:

```
vitest.config.ts
```
- Vitest with node environment
```
test/setup.ts
```
- Test setup for NestJS
```
.github/workflows/ci.yml
```
- CI with MongoDB service

Test pattern:

src/**/*.spec.ts

安装的依赖项：

bash

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

创建的文件：

```
vitest.config.ts
```
- 配置node环境的Vitest
```
test/setup.ts
```
- NestJS测试设置文件
```
.github/workflows/ci.yml
```
- 包含MongoDB服务的CI流水线

测试匹配规则：

src/**/*.spec.ts

React/Node.js Projects

React/Node.js项目

Follows similar patterns based on detected framework.

根据检测到的框架遵循类似的配置模式。

Coverage Configuration

覆盖率配置

Default thresholds (configurable):

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

Coverage is enforced:

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

默认阈值（可配置）：

代码行：80%
函数：80%
分支：75%
语句：80%

覆盖率强制校验通过以下方式实现：

提交前钩子（通过Husky）
CI/CD流水线（GitHub Actions）

GitHub Actions Features

GitHub Actions特性

The generated CI workflow includes:

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

生成的CI工作流包含：

带缓存的Bun环境搭建
依赖安装
代码检查与格式化（Biome）
TypeScript类型检查
带覆盖率统计的测试执行
构建验证
MongoDB服务（针对NestJS项目）

Templates

模板文件

Templates are located in the

templates/

directory:

Template	Purpose
`vitest.config.nextjs.ts`	Vitest config for Next.js
`vitest.config.nestjs.ts`	Vitest config for NestJS
`ci-nextjs.yml`	GitHub Actions for Next.js
`ci-nestjs.yml`	GitHub Actions for NestJS
`test-setup-react.ts`	Test setup with RTL
`test-setup-node.ts`	Test setup for Node.js

模板文件位于

templates/

目录下：

模板文件	用途
`vitest.config.nextjs.ts`	Next.js项目的Vitest配置
`vitest.config.nestjs.ts`	NestJS项目的Vitest配置
`ci-nextjs.yml`	Next.js项目的GitHub Actions配置
`ci-nestjs.yml`	NestJS项目的GitHub Actions配置
`test-setup-react.ts`	React项目的测试设置
`test-setup-node.ts`	Node.js项目的测试设置

Monorepo Support

单体仓库支持

For monorepos (detected by workspaces in package.json):

Creates
```
vitest.workspace.ts
```
at root
Creates individual
```
vitest.config.ts
```
per package
Creates root-level GitHub Actions workflow
Uses
```
bun --filter '*' test
```
for orchestration

对于单体仓库（通过package.json中的workspaces检测）：

在根目录创建
```
vitest.workspace.ts
```
为每个包创建独立的
```
vitest.config.ts
```
创建根级别的GitHub Actions工作流
使用
```
bun --filter '*' test
```
进行任务编排

Integration with Other Skills

与其他技能的集成

Skill	Integration
`husky-test-coverage`	Adds pre-commit coverage enforcement
`linter-formatter-init`	Works alongside for code quality
`playwright-e2e-init`	Adds E2E testing after unit tests
`testing-expert`	Provides testing patterns guidance

技能	集成说明
`husky-test-coverage`	添加提交前覆盖率强制校验
`linter-formatter-init`	配合使用以提升代码质量
`playwright-e2e-init`	在单元测试后添加端到端测试
`testing-expert`	提供测试模式指导

Example Usage

使用示例

Adding tests to a Next.js project

为Next.js项目添加测试

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

用户：为这个项目添加测试

Claude：
1. 从package.json检测到Next.js项目
2. 安装vitest、@vitest/coverage-v8、@testing-library/react
3. 创建配置jsdom环境的vitest.config.ts
4. 创建src/test/setup.ts
5. 创建.github/workflows/ci.yml
6. 在package.json中添加测试脚本

Adding tests to a NestJS API

为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

用户：为这个NestJS API设置测试

Claude：
1. 从@nestjs/core依赖检测到NestJS项目
2. 安装vitest、@vitest/coverage-v8、supertest
3. 创建配置node环境的vitest.config.ts
4. 创建test/setup.ts
5. 创建包含MongoDB服务的.github/workflows/ci.yml
6. 在package.json中添加测试脚本

Troubleshooting

故障排查

Tests not finding modules

测试无法找到模块

Ensure path aliases in

vitest.config.ts

match

tsconfig.json

typescript

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

确保

vitest.config.ts

中的路径别名与

tsconfig.json

一致：

typescript

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

Coverage below threshold

覆盖率未达阈值

Check coverage report:
```
bun test --coverage
```
Identify uncovered lines
Add tests or adjust thresholds temporarily

查看覆盖率报告：
```
bun test --coverage
```
找出未覆盖的代码行
添加测试或临时调整阈值

CI failing on type errors

CI因类型错误失败

Ensure

bunx tsc --noEmit

passes locally before pushing.

推送代码前确保本地

bunx tsc --noEmit

执行通过。

Best Practices

最佳实践

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

When this skill is active, Claude will:

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

从单元测试开始，针对工具类和服务编写测试
添加集成测试，针对API端点进行测试
谨慎使用端到端测试，仅针对关键流程
通过Husky在提交前运行测试
在CI中监控覆盖率趋势

当此技能激活时，Claude会：

自动检测项目类型
安装合适的测试依赖
创建配置正确的测试文件
搭建GitHub Actions CI/CD
配置覆盖率阈值
在package.json中添加测试脚本