组件测试是什么
组件测试针对单个可独立运行的组件验证其对外行为：一个前端组件、一个模块，或一个可独立启动的服务。它比单元测试更接近真实（可带真实渲染或真实 IO），比端到端测试更聚焦、更快，失败定位也更直接。核心工作是划清组件边界：内部依赖可以替换，风险高的部分保留真实。
基本信息
| 前端组件 | Playwright Component Testing、Cypress Component Testing、Testing Library |
|---|---|
| 后端组件 | 单独启动服务实例，直连其 API 或数据库 |
| 边界原则 | 内部依赖可替换，高风险的真实部分保留 |
| 速度定位 | 介于单元测试与端到端测试之间 |
典型使用场景
- 复杂前端组件：表单校验、状态切换、键盘与焦点交互
- 单个微服务：本服务逻辑加真实数据库容器
- 共享组件库：版本升级后的行为回归
- 组件契约：以输入输出（props、响应结构）为主的验证
- 本地开发反馈：替代一部分运行缓慢的端到端用例
- 灰度前的组件级验证：改动只影响单个组件时快速取证
前端组件示例
前端组件示例
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
test("点击计算后展示结果", async () => {
render(<ResultBox initial="待定" />);
await userEvent.click(screen.getByRole("button", { name: "计算" }));
expect(screen.getByText("通过")).toBeInTheDocument(); // 只断言对外可见结果
});组件测试的定位
| 维度 | 组件测试 | 对照 |
|---|---|---|
| 范围 | 单个组件的对外行为 | 单元更小，端到端更大 |
| 依赖 | 内部依赖可替换，高风险部分真实 | 单元全替换，端到端全真实 |
| 速度 | 秒级到十几秒 | 单元最快，端到端最慢 |
| 失败定位 | 直接指向组件 | 端到端需跨层排查 |
断言对外行为（渲染结果、事件回调、响应结构），不绑定内部实现细节，重构后不应失败。
边界模糊化后组件测试会逐步长成端到端测试，失去速度优势；为组件测试拖入完整后端环境，稳定性与单元测试不可比。