使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/augmnt/webdev-skills --skill writing-tests开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
仓库原始内容
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
Writing Tests
Test behavior, not implementation. Prioritize by risk.
When to Use Each Type
| Type | What | When | Tools |
|---|---|---|---|
| Unit | Single function/hook | Pure logic, calculations | Vitest, Jest |
| Integration | Component + deps | Forms, data display | Testing Library |
| E2E | Full user flow | Critical paths | Playwright |
Always Test
- Auth flows
- Payment/checkout
- Data mutations (create, update, delete)
- Authorization rules
- Critical business logic
Rarely Test
- Static content
- Third-party internals
- Pure styling
File Organization
src/components/Button/
├── Button.tsx
└── Button.test.tsx # Colocated
e2e/ # E2E at root
├── auth.spec.ts
└── checkout.spec.tsPatterns
Arrange-Act-Assert
typescript
test('increments on click', () => {
// Arrange
render(<Counter initial={0} />)
// Act
fireEvent.click(screen.getByRole('button'))
// Assert
expect(screen.getByText('1')).toBeInTheDocument()
})Query Priority (best → worst)
getByRole- semantic, accessiblegetByLabelText- form inputsgetByText- contentgetByTestId- last resort
Test Behavior, Not Implementation
typescript
// ❌ Implementation
expect(component.state.isOpen).toBe(true)
// ✅ Behavior
expect(screen.getByRole('dialog')).toBeVisible()Minimum Viable Testing
If time-constrained:
- E2E for happy paths (covers most ground)
- Unit for complex logic (catches edge cases)
- Integration for critical components (forms, data)
Advanced Patterns
For API mocking, test fixtures, and coverage guidance, see MOCKING.md.
