sakumyz 测试用例生成器
为组件和函数自动生成测试用例骨架。
工作流程
1. 环境探测
- 读取
package.json确认测试框架（Jest / Vitest） - 检查测试配置文件（
jest.config.*/vitest.config.*） - 扫描现有测试文件了解命名和组织规范
- 确认测试工具库（React Testing Library / Vue Test Utils / Enzyme）
2. 分析目标代码
读取目标文件，提取：
- 导出的函数/组件名
- Props/参数类型定义
- 内部状态和副作用
- 事件处理函数
- 依赖的外部模块（用于 mock）
3. 生成策略
工具函数测试
describe('functionName', () => {
// 正常情况
it('应该 [预期行为] 当 [正常输入]', () => {})
// 边界情况
it('应该 [预期行为] 当输入为空', () => {})
it('应该 [预期行为] 当输入为 null/undefined', () => {})
// 异常情况
it('应该 [抛出错误/返回默认值] 当 [异常输入]', () => {})
})
React 组件测试
describe('ComponentName', () => {
// 渲染测试
it('应该正常渲染', () => {})
it('应该渲染所有必需的 UI 元素', () => {})
// Props 测试
it('应该正确显示 [prop] 内容', () => {})
it('应该使用默认值当 [prop] 未传入', () => {})
// 交互测试
it('应该在点击 [按钮] 后 [预期行为]', () => {})
it('应该在输入变化后 [预期行为]', () => {})
// 异步测试
it('应该在加载完成后显示数据', async () => {})
it('应该在请求失败时显示错误信息', async () => {})
})
Vue 3 组件测试
describe('ComponentName', () => {
// 渲染测试
it('应该正常渲染', () => {
const wrapper = mount(ComponentName, { props: {} })
expect(wrapper.exists()).toBe(true)
})
// Props 测试
it('应该响应 props 变化', async () => {
const wrapper = mount(ComponentName, { props: { value: 'initial' } })
await wrapper.setProps({ value: 'updated' })
expect(wrapper.text()).toContain('updated')
})
// 事件测试
it('应该触发 [事件名] 事件', async () => {
const wrapper = mount(ComponentName)
await wrapper.find('button').trigger('click')
expect(wrapper.emitted('eventName')).toBeTruthy()
})
})
4. 测试文件放置
遵循项目现有模式：
__tests__/目录：src/__tests__/ComponentName.test.tsx- 同级目录：
src/components/ComponentName.test.tsx - spec 后缀：
src/components/ComponentName.spec.tsx
5. Mock 策略
- API 请求：mock HTTP 客户端或使用 MSW
- 路由：mock router（useNavigate / useRouter）
- 状态管理：提供 mock store/provider
- 定时器：使用
vi.useFakeTimers()/jest.useFakeTimers()
重要原则
- 生成骨架，不猜测业务逻辑：测试体内用 TODO 标记需要补充的断言
- 覆盖基础场景：渲染、Props、交互、边界值
- 遵循 AAA 模式：Arrange → Act → Assert
- 测试行为而非实现：不测试内部 state，测试 UI 输出