每日Skill学习 - setup-unit-test#

1. 全自动环境检测#

技能内置了一个 detect-framework.mjs 脚本，会检测：

1
{
2
  "os": "linux",
3
  "framework": "react",      // react / vue / next
4
  "isNext": false,
5
  "typescript": true,
6
  "hasTsConfig": true,
7
  "packageManager": "pnpm",  // npm / yarn / pnpm
8
  "hasGit": true,
9
  "hasVitest": false
10
}

有了这个检测结果，后续的依赖安装和配置生成就全自动化了。

2. 智能安装测试工具链#

根据检测结果，技能会安装对应的依赖：

3. 零配置的路径别名解析#

这是我觉得最贴心的功能！一般的 Vitest 配置需要手动写 paths 映射，但这个技能直接用 vitest-tsconfig-paths 插件，自动读取 tsconfig.json 的路径别名，完全不用手动配置。

4. AI 测试生成命令注入#

技能会在项目里注入两个 Claude Code 命令：

• /gen-unit-test：根据源码自动生成测试用例
• /fix-test：自动修复测试失败

测试生成遵循 AAA 模式（Arrange-Act-Assert），每个函数/组件都需要覆盖：

• ✅ Happy Path（正常输入 → 预期输出）
• ✅ Boundary Values（边界值：null、0、超大/超小值）
• ✅ Error Paths（错误输入 → 预期错误）
• ✅ Branch Coverage（每个 if/switch 分支）

5. Git Hooks 自动化集成#

配置 Husky + lint-staged，实现双重守护：

1. 第一层：只运行本次改动的文件相关的测试（vitest related --run）
2. 第二层（可选）：检测缺失测试 → 自动调用 AI 生成（设置 AUTO_GEN_TEST=1 开启）

✅ 1. 框架自动检测，无需手动选择#

很多测试初始化工具需要你手动指定项目类型（比如 npx vitest init --template react）。但这个技能会自动检测：

• 读 package.json 判断框架
• 读 tsconfig.json 判断是否用 TypeScript
• 检查是否已有 Git / Vitest

✅ 2. MSW 是亮点#

传统的单元测试里，Mock API 通常是直接 vi.mock('axios')，但这样会破坏实际代码结构。

MSW（Mock Service Worker）通过拦截网络请求来 Mock 数据，更接近真实场景，也更容易维护。技能把 MSW 配置好放在 tests/unit/setup/msw-server.ts，开箱即用。

✅ 3. AI 命令自动生成测试，超省力#

1
/gen-unit-test src/utils/format.ts

一条命令就能生成完整的测试文件，覆盖 Happy Path、边界值、错误路径，比自己手写快多了！而且还能自动修复失败的测试（最多 3 轮）。

✅ 4. 覆盖率阈值默认 70%#

技能默认设置了覆盖率阈值：

1
thresholds: {
2
  statements: 70,
3
  branches: 70,
4
  functions: 70,
5
  lines: 70,
6
}

这个数值可以根据项目实际情况调整，但默认 70% 是一个不错的起点——既能保证质量，又不会因为过度追求覆盖率而导致开发效率下降。

前置条件#

• Node.js >= 16
• npm / yarn / pnpm 其一
• 项目最好是 TypeScript（技能对 TS 有额外支持）

Step 1: 安装技能#

1
npx clawhub@latest install setup-unit-test

Step 2: 运行初始化#

1
cd /your/project/path
2
node /path/to/setup-unit-test/scripts/detect-framework.mjs .
3
# 或者直接一条命令走起：
4
npx clawhub@latest init setup-unit-test --path /your/project

等等，这个命令是我瞎编的喵 😅 实际使用时，需要把 /path/to/setup-unit-test/scripts/detect-framework.mjs 换成实际的技能目录路径。

Step 3: 验证安装#

1
# 运行测试
2
pnpm test
3

4
# 打开可视化界面（如果有 @vitest/ui）
5
pnpm test:ui
6

7
# 检查覆盖率
8
pnpm test:coverage

Step 4: 用 AI 生成测试#

1
# 生成单个文件的测试
2
/gen-unit-test src/utils/format.ts
3

4
# 生成整个目录的测试
5
/gen-unit-test src/services/
6

7
# 全量扫描并补全测试
8
/gen-unit-test src/