前端单元测试、集成测试和 E2E 测试有什么区别？应该分别测什么？

知识点详解：一条登录流程，分层验证不同问题

单元测试，先保护容易独立判断的规则

咱们假设登录表单要求填写用户名和密码。输入整理、字段校验和错误码转换，都可以在较小范围内测试。

这些测试运行快，失败位置也相对清楚。比如空密码是否被拒绝，不必启动完整浏览器、访问真实账号系统以后才能检查。

但不要把“独立”理解成必须只测纯函数。组件也可以在隔离环境里测试。重点是限定范围，避免让无关依赖决定这个测试是否通过。

Vue 的测试指南分别讨论了单元、组件和端到端测试；真实项目可以按团队定义安排，不需要为了标签争论每个组件属于哪一层。

集成测试，检查部件之间有没有接错

登录校验正确，不代表页面一定正确。点击按钮以后，是否发送了正确字段？请求失败后是否显示提示？请求进行中是否阻止重复提交？

这些问题需要多个部件一起运行。可以渲染表单组件，触发用户输入，再用受控响应验证页面行为。

这里经常需要替换网络依赖，但要明确替换位置。直接 mock 掉提交函数，可能只能证明按钮调用了函数；在 HTTP 边界返回响应，则能保留更多请求构造和页面处理逻辑。

哪一种合理，要看测试目标。不能一边把关键逻辑全部替换掉，一边宣称完整流程已经验证。

E2E，检查部署出来的应用能否完成事情

E2E 可以启动浏览器，打开应用，输入信息并完成登录。它有机会发现路由、构建配置、资源加载、接口和浏览器行为之间的问题。

Cypress 的测试类型说明也强调组件与端到端范围的区别。不过，E2E 是否使用真实后端仍需说明；拦截接口的浏览器测试，不能证明服务器登录能力正常。

越接近真实环境，成本与不稳定因素通常越多。账号准备、数据清理、服务状态和执行时间，都需要维护。因此，适合选最关键的用户流程，而不是机械地把每个校验组合都重新走一遍。

分层以后，还要避免重复和空白

可以给登录功能安排如下职责：

要验证的问题	合适的起点
各种字段边界	单元测试
提交、加载状态与错误提示	组件或集成测试
实际应用登录与跳转	关键 E2E
后端权限规则	后端测试，不由前端 mock 代替

这不是固定配额。若一个故障只会在真实浏览器出现，就应增加相应测试；如果 E2E 已经覆盖某条流程，较低层仍可负责更细的边界，但不必重复相同断言。

测试失败也应便于诊断。固定数据、等待明确条件、保留截图和请求信息，比随意增加等待时间更可靠。一个经常失败却没人处理的测试，并不会自动带来质量收益。

面试官继续追问

E2E 能覆盖一切，为什么还要单元测试？

理论上可以走很多路径，但执行慢、定位难，准备每种输入也更复杂。较低层测试能用更低成本检查大量边界，并更快指出具体逻辑问题。

测试覆盖率高，就说明质量好吗？

不能。覆盖率说明代码被执行到的范围，不证明断言有效或真实风险被覆盖。关键行为、错误路径和权限边界仍要单独检查。

测试不稳定，先加等待时间吗？

先找不稳定原因。等待明确的界面状态或响应事件，通常比固定睡眠更合理；数据和环境问题也要修复，不能用长等待掩盖。

面试速记卡

• 单元测试：聚焦较小范围，快速覆盖规则与边界。
• 集成测试：检查多个真实部件怎样配合。
• E2E：从用户操作验证关键应用链路。
• mock 边界：替换了什么，就要说明哪些结论不能证明。
• 分层原则：细节低成本覆盖，关键真实链路单独验证。