测试

测试是前端工程化中的重要环节，有助于提高代码质量、减少 bug 出现率，并确保应用在各种场景下都能稳定运行。本章介绍三种主要的前端测试策略：单元测试、组件测试和端到端 (E2E) 测试。

单元测试

单元测试关注于验证代码最小可测试单元的正确性，通常是单个函数或类方法。

特点与价值

粒度小：专注于测试独立的代码单元
执行快：通常不依赖 DOM 或网络请求
易于维护：当单个函数逻辑变化时，仅需修改对应测试
提早发现问题：在开发阶段就能发现逻辑问题

适用场景

纯函数测试（输入确定，输出一致）
工具函数库
业务逻辑处理函数
数据转换函数

常用工具

我们的项目主要使用以下单元测试工具:

Jest: Facebook 开发的零配置测试框架，内置断言库和模拟功能，适用于大多数 JavaScript 项目
Vitest: 专为 Vite 项目设计的单元测试框架，具有更快的启动和执行速度，与 Vite 的 HMR 无缝集成

最佳实践

测试覆盖率建议达到 70% 以上
遵循 AAA 模式：Arrange（准备）、Act（执行）、Assert（断言）
一个测试用例专注于一个行为点
测试边界条件和异常情况
使用模拟 (Mock) 隔离外部依赖

组件测试

组件测试关注 UI 组件的渲染结果、交互行为和生命周期，处于单元测试和 E2E 测试之间。

特点与价值

中等粒度：测试单个组件及其内部逻辑
更接近用户体验：验证组件的视觉输出和交互行为
发现渲染问题：能发现 DOM 结构、样式和状态管理问题
跨框架支持：主流前端框架均有对应测试工具

适用场景

可复用 UI 组件
复杂表单组件
包含状态管理的组件
需要验证用户交互的组件

常用工具

我们的组件测试主要采用:

React Testing Library: 鼓励测试用户行为而非实现细节，关注 DOM 节点而非组件实例，符合可访问性最佳实践
Vue Test Utils: Vue 官方的组件测试库，提供挂载和操作 Vue 组件的工具，支持组件行为的全面测试

最佳实践

尽量测试组件的公共 API 而非内部实现
模拟用户行为而非直接操作组件状态
关注可访问性（Accessibility）
测试组件在不同 props 和状态下的渲染结果
使用快照测试检测意外的 UI 变化

集成测试

集成测试验证多个单元或组件在协同工作时的正确性，关注模块之间的交互和数据流动。

特点与价值

中高粒度：测试多个组件或模块的集成
发现接口问题：验证模块间接口兼容性
验证数据流：确保数据在系统中正确流转
降低风险：在上线前发现模块协作问题

适用场景

前端与 API 的交互
组件树的协同工作
状态管理与 UI 层的集成
路由与视图切换
数据获取与渲染流程

常用工具

集成测试可以利用多种工具组合实现：

MSW (Mock Service Worker)：拦截网络请求进行 API 模拟
Jest + React Testing Library：测试 React 组件树
Vitest + Vue Test Utils：测试 Vue 组件集成

最佳实践

重点测试模块间的边界和交互
合理使用模拟（Mock）外部依赖
构建接近生产环境的测试条件
测试不同状态转换下的系统表现
关注异常情况和边缘案例的处理

E2E 测试

端到端测试模拟真实用户在实际环境中的操作，验证整个应用流程的正确性。

特点与价值

粒度大：测试完整的用户流程
高覆盖度：验证前后端集成和实际业务流程
发现系统级问题：能发现组件间交互和 API 集成问题
最接近用户体验：直接验证用户视角下的功能

适用场景

核心业务流程（如注册、登录、支付）
跨页面操作
表单提交流程
API 交互场景

Playwright

我们选择 Playwright 作为 E2E 测试工具，它由微软开发，具有以下优势：

多浏览器支持：支持 Chromium、Firefox、WebKit，确保跨浏览器兼容性
自动等待：智能等待元素可交互，减少测试中的人为延迟
强大的选择器：提供 CSS、XPath 及多种高级选择器
隔离上下文：每个测试运行在隔离环境，避免状态污染
网络拦截：可模拟 API 响应，测试边缘情况
Mobile 视图模拟：支持移动设备测试
并行执行：提高测试执行效率
调试工具：提供录像、截图和追踪功能

最佳实践

专注于测试关键用户流程，而非所有场景
构建独立的测试环境，避免影响生产数据
使用 Playwright 的自动等待功能，避免显式等待
设计可靠的选择器，优先使用数据属性（如 data-testid）
利用 fixtures 组织测试前置条件
定期运行测试以发现回归问题

框架与测试工具映射关系

下表展示了不同前端框架与测试工具的推荐搭配方案：

测试类型	React	Vue	Next.js
单元测试	Jest	Vitest	Jest
组件测试	React Testing Library	Vue Test Utils	React Testing Library
集成测试	Jest + MSW	Vitest + MSW	Jest + MSW
E2E 测试	Playwright	Playwright	Playwright

选择合适的测试工具组合可以显著提高开发效率和测试覆盖率，确保代码质量的同时也保证了开发体验。

测试金字塔策略

为了平衡测试覆盖率、执行效率和维护成本，推荐采用现代化的测试金字塔策略：

            /\
           /  \
          / E2E \
         /______\
        /        \
       / 集成测试  \
      /____________\
     /              \
    /  组件测试      \
   /________________\
  /                  \
 /     单元测试       \
/______________________\

金字塔各层特点：

测试类型	数量	速度	维护成本	环境依赖	可靠性
E2E 测试	少量	慢	高	强	易受环境影响
集成测试	中量	中	中高	中	较稳定
组件测试	中量	较快	中	弱	稳定
单元测试	大量	非常快	低	几乎无	很稳定

测试策略建议：

底层：编写大量单元测试，覆盖核心业务逻辑和工具函数
中下层：为关键 UI 组件编写组件测试，验证渲染和交互
中上层：通过集成测试验证组件协作和数据流转
顶层：少量 E2E 测试确保关键用户路径正常工作

这种分层策略充分平衡了测试覆盖范围、执行效率和维护成本，同时确保了各种规模的功能都能得到适当的测试保障。

注意

在实际项目中，不必过度追求测试覆盖率，应该根据项目需求和团队资源合理安排测试策略。过多的测试可能导致维护成本增加，反而影响开发效率。我们鼓励团队成员在开发过程中编写测试用例，以确保代码质量和稳定性。

单元测试​

特点与价值​

适用场景​

常用工具​

最佳实践​

组件测试​

特点与价值​

适用场景​

常用工具​

最佳实践​

集成测试​

特点与价值​

适用场景​

常用工具​

最佳实践​

E2E 测试​

特点与价值​

适用场景​

Playwright​

最佳实践​

框架与测试工具映射关系​

测试金字塔策略​

单元测试

特点与价值

适用场景

常用工具

最佳实践

组件测试

特点与价值

适用场景

常用工具

最佳实践

集成测试

特点与价值

适用场景

常用工具

最佳实践

E2E 测试

特点与价值

适用场景

Playwright

最佳实践

框架与测试工具映射关系

测试金字塔策略