再也不用手写单测配置了！我用 Claude Code Skill 一键搞定整个测试环境

每次新开前端项目，配置单测环境都让我头疼：装哪些包？vitest 怎么写？mock server 怎么搭？pre-commit hook 怎么加？这篇文章分享我是怎么把这一切自动化的。

---

背景：为什么要自动化这件事？

相信很多前端开发者都有这种体验：

• 新项目第一天，花 2 小时配单测环境
• 从上一个项目复制 vitest.config.ts，发现路径不对、依赖版本冲突
• 配好了又忘记加 pre-commit hook，结果测试从来没人跑
• 想用 MSW mock API，又要重新查一遍文档

这些事情每次都一样，每次都要重新做。

最近我在用 Claude Code，发现它支持一种叫 Skill 的机制——本质上是一套可复用的 AI 指令 + 脚本，可以让 Claude 自动执行一系列复杂任务。于是我做了一个专门解决这个问题的 Skill：Unit Test Automation。

---

它能做什么？

一句话：检测你的项目 → 自动安装所有依赖 → 生成配置文件 → 配置 Git Hook → 写入 AI 命令，全程不需要你手动操作。

具体来说，它会完成以下 8 个步骤：

Step 1：自动检测项目环境

运行内置的检测脚本，识别：

• 框架类型（React / Vue / 纯 TypeScript）
• 是否使用 TypeScript
• 包管理器（npm / yarn / pnpm）
• 已安装了哪些测试相关依赖

Step 2：精准安装依赖

根据检测结果，只安装缺失的依赖，不重复安装：

所有项目通用：

• vitest + @vitest/coverage-v8
• msw（Mock Service Worker）
• jsdom

React 项目额外安装：

• @testing-library/react
• @testing-library/jest-dom
• @testing-library/user-event

Vue 项目额外安装：

• @testing-library/vue
• @testing-library/jest-dom
• @testing-library/user-event

Step 3：生成配置文件

自动生成以下文件，根据你的框架选择正确的插件：

vitest.config.ts                    ← 主配置，含覆盖率阈值（70%）
tests/unit/setup/index.ts           ← 全局 setup
tests/unit/setup/msw-server.ts      ← Mock Server
tests/unit/setup/msw-handlers.ts    ← 默认 handlers（空模板，填自己的）

覆盖率配置是开箱即用的：

coverage: {
  provider: 'v8',
  reporter: ['text', 'html', 'json-summary'],
  thresholds: { statements: 70, branches: 70, functions: 70, lines: 70 },
}

Step 4：写入 Claude Code 命令

这是我觉得最有意思的部分。Skill 会往你的项目里写入两个 Claude Code 自定义命令：

命令	功能
/gen-unit-test	为指定文件自动生成单测
/fix-test	修复失败的测试

以后直接在 Claude Code 里输入 /gen-unit-test src/utils/formatter.ts，就能生成对应的单测文件。

Step 5：添加 npm scripts

自动合并到 package.json（不覆盖已有的）：

{
  "test": "vitest run",
  "test:watch": "vitest",
  "test:coverage": "vitest run --coverage",
  "test:ui": "vitest --ui"
}

Step 6：配置 Git pre-commit hook

这是整个 Skill 的"灵魂"设计——两层自动化：

第一层（守门员）： lint-staged 在提交前跑相关测试，测试挂了就阻止提交。

第二层（补全器）： 检查本次改动的文件有没有对应的测试文件，如果没有，自动调用 AI 生成并加入提交。

第二层默认是关闭的，需要手动开启：

export AUTO_GEN_TEST=1

这样设计是合理的——先让第一层稳定跑一段时间，等 /gen-unit-test 生成质量稳定了，再开启自动模式。

Step 7：验证环境

生成一个 demo.test.ts，跑一下验证整个工具链是否正常，然后自动删除。

Step 8：输出完整初始化报告

Initialization complete:
- Framework:      React
- Test Directory: tests/unit/
- Config File:    vitest.config.ts
- Git Hook:       Husky + lint-staged
- AI Generation:  Off by default (set AUTO_GEN_TEST=1 to enable)
- Commands:       /gen-unit-test, /fix-test
- Run Tests:      npm test

---

怎么使用？

1. 安装 Skill

这个 Skill 发布在 ClawHub，根据你使用的工具选择安装方式：

方式 A：OpenClaw 用户

# 全局安装 clawhub CLI（只需一次）
npm i -g clawhub

# 安装 Skill
clawhub install setup-unit-test

方式 B：Claude Code 用户

1. 打开 Skill 页面，点击 Download zip 下载压缩包 👉 clawhub.ai/hibehero/se…

2. 解压到项目的 .claude/skills/setup-unit-test/ 目录下：

   mkdir -p .claude/skills/setup-unit-testunzip setup-unit-test.zip -d .claude/skills/setup-unit-test
   

3. 在 Claude Code 中输入：

   请读取 .claude/skills/setup-unit-test/SKILL.md 并按照步骤初始化单测环境
   

安全说明： ClawHub 安全扫描提示 check-missing-tests.js 中有 child_process 调用。这是用来执行 git diff --staged 检查暂存文件的，完全合理。所有代码开源（MIT-0），可在安装前自行审查。

2. 等待自动完成

运行后，Skill 会自动完成所有 8 个步骤，约 1-2 分钟。

3. 开始写测试

npm test              # 跑所有测试
npm run test:watch    # 监听模式
npm run test:coverage # 生成覆盖率报告

在 Claude Code 中：

/gen-unit-test src/components/Button.tsx
/fix-test tests/unit/Button.test.tsx

---

实际效果对比

	手动配置	使用 Skill
耗时	1-2 小时	< 2 分钟
记忆成本	每次查文档	零
一致性	每个项目不同	完全一致
pre-commit hook	经常忘	自动配置
AI 命令集成	手动写	开箱即用

---

总结

这个 Skill 解决的核心问题是：把重复劳动变成一次性投入。配置单测环境的知识被固化进 Skill，以后每个新项目都能在 2 分钟内拥有一套完整的测试基础设施。

如果你在用 Claude Code 或 OpenClaw 做前端开发，值得试试。

👉 Skill 地址： clawhub.ai/hibehero/se…

有问题欢迎评论交流！

---