关于 writing-tests
writing-tests 是面向开发者的测试技能,指导按风险选择测试类型,并围绕用户可见行为安排覆盖范围。它还提供查询与测试结构建议,并指向模拟和覆盖率相关内容。
主要功能
- 01按风险确定测试优先级
- 02单元、集成与端到端测试指南
- 03Arrange-Act-Assert 模式
- 04选择无障碍查询方式
- 05测试文件与组件并置
- 06最小可行测试建议
适用场景
- 01为功能选择测试类型
- 02优先测试身份验证与结账流程
- 03测试 UI 组件的行为
- 04时间有限时规划测试
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ augmnt/ webdev-skills --skill writing-tests安装后在 Claude Code 中输入/writing-tests确认已加载。
附带文件MOCKING.md
详细介绍
编写测试
测试行为,而非实现。根据风险确定优先级。
何时使用各类测试
| 类型 | 内容 | 适用场景 | 工具 |
|---|---|---|---|
| 单元测试 | 单个函数/Hook | 纯逻辑、计算 | Vitest、Jest |
| 集成测试 | 组件 + 依赖 | 表单、数据展示 | Testing Library |
| 端到端测试 | 完整的用户流程 | 关键路径 | Playwright |
始终测试
- 身份验证流程
- 支付/结账
- 数据变更(创建、更新、删除)
- 授权规则
- 关键业务逻辑
很少测试
- 静态内容
- 第三方库的内部实现
- 纯样式
文件组织
src/components/Button/
├── Button.tsx
└── Button.test.tsx # Colocated
e2e/ # E2E at root
├── auth.spec.ts
└── checkout.spec.ts
模式
准备-执行-断言
test('increments on click', () => {
// Arrange
render(<Counter initial={0} />)
// Act
fireEvent.click(screen.getByRole('button'))
// Assert
expect(screen.getByText('1')).toBeInTheDocument()
})
查询优先级(最佳 → 最差)
getByRole- 语义化且易于访问getByLabelText- 表单输入getByText- 内容getByTestId- 最后手段
测试行为,而非实现
// ❌ Implementation
expect(component.state.isOpen).toBe(true)
// ✅ Behavior
expect(screen.getByRole('dialog')).toBeVisible()
最小可行测试
如果时间有限:
- 为正常流程编写端到端测试(覆盖大部分场景)
- 为复杂逻辑编写单元测试(捕获边界情况)
- 为关键组件编写集成测试(表单、数据)
高级模式
有关 API 模拟、测试夹具和覆盖率指导,请参阅 MOCKING.md。
评论
支持 Markdown