Cypress 组件测试框架

解决什么问题

在 React、Vue 或 Angular 项目里，单元测试通常只覆盖一个纯函数或一个 reducer，而端到端测试要起整个应用。组件层恰好落在中间：一个按钮、一个表单控件的行为依赖 props、用户交互和内部状态，但又不该被数据库、网络请求这些基础设施干扰。

手工搭这套环境很麻烦。要配置 webpack 或 vite 的开发服务器让 Cypress 能加载单个组件，要处理 CSS Modules、别名、环境变量，还要想办法把组件渲染结果和预期做比较。这个技能把这套脚手架固化下来，让测试直接落在组件边界上。

核心能力

• 统一的挂载接口：基于 Cypress CT 的 mount API，在测试里把组件渲染成真实 DOM，而不是停留在快照文件层面。
• 多框架适配：支持 @cypress/react、@cypress/vue、@cypress/angular，分别处理各自的挂载与清理逻辑。
• 构建工具集成：通过 @cypress/webpack-dev-server 或 @cypress/vite-dev-server 启动临时开发服务器，按需打包被测组件。
• 视觉断言：生成基于快照的视觉对比，适合捕捉 CSS 变化导致的布局回归。

关键步骤

1. 按项目使用的构建工具选择对应的 dev server 插件，让 Cypress 能解析组件依赖。
2. 在测试里用 mount 渲染组件并传入 props，像写用户操作一样触发点击、输入。
3. 对 DOM 结构做断言；对样式敏感的模块追加快照视觉断言。
4. 框架层面自动处理挂载点与状态清理，避免组件在用例之间互相污染。

适用边界与注意点

适合的场景是组件级行为验证：props 驱动的渲染、用户交互后的状态变化、组件边界的 props 校验。需要请求真实后端的集成测试不属于这个范围。

快照视觉断言对像素级变化敏感，文本内容、浏览器版本、字体渲染差异都可能产生噪声 diff，建议把它当作辅助手段，而不是替代行为断言。

同一仓库里只用一种构建工具。同时引入 webpack 和 vite 两套配置会让组件加载行为变得难以推断。

此外，组件测试不等于 E2E。它无法验证组件在真实应用中的组合方式、路由状态和全局样式注入，这些仍需端到端测试覆盖。