标准答案
- 优先测试用户能看到的文本、按钮状态、表单提示、列表变化和错误反馈。
- 交互测试要模拟真实用户行为，例如点击、输入、键盘操作和提交。
- 异步组件要测试 loading、成功、失败和重试等关键状态。
- 不应该直接断言内部 useState 值、私有函数调用顺序或组件内部 DOM 层级。
- 测试用例应覆盖高风险业务路径，而不是为每一行 JSX 写快照。
题目解析
这道题和 Testing Library 理念一致。测试越贴近用户行为，重构组件实现时越不容易误报。
组件测试不是 E2E 测试，通常不需要覆盖完整跨页面链路。
对于复杂表单、权限按钮、错误态和异步请求，组件测试能提供很高的回归收益。
代码示例
下面测试提交失败后页面出现字段错误，而不是检查内部错误对象。
TSX
it('shows email error after submit', async () => {
render(<SignupForm />)
await userEvent.type(screen.getByLabelText('邮箱'), 'bad-email')
await userEvent.click(screen.getByRole('button', { name: '注册' }))
expect(screen.getByText('邮箱格式不正确')).toBeInTheDocument()
})常见误区
- 大量依赖 snapshot，组件稍微调整结构就产生无意义 diff。
- 直接测试内部函数和 state，导致实现重构时测试大量失败。
- 只测成功路径，不测 loading、失败、空数据和权限禁用状态。