解耦与职责分离是设计可测试React/Vue组件的核心。展示组件仅接收props渲染UI，逻辑组件处理数据获取与状态管理，便于隔离验证。业务逻辑应提取为纯函数或服务，如表单验证、API调用独立封装，利于单元测试。通过props或依赖注入传递外部依赖，避免直接调用全局方法，提升mock能力。本地状态保留在组件内，共享状态使用Redux/Pinia等管理，确保action可独立测试。组件行为通过回调或事件暴露，测试时断言输出而非副作用，结合Testing Library模拟用户交互，实现可预测、易维护的测试架构。
设计可测试的 React 或 Vue 组件架构，核心在于解耦、职责分离和依赖可控。测试友好性不是后期加的功能，而是从一开始就该融入架构决策中。重点是让组件逻辑容易被隔离验证，UI 行为可预测，状态管理清晰。
保持组件职责单一
每个组件只做一件事，比如展示数据、处理表单、触发事件。这样测试时只需关注一个行为。
- 把展示型组件（Presentational）和逻辑型组件（Container）分开。展示组件只接收 props 并渲染 UI，不直接访问状态或副作用，这类组件最容易测。
- 例如，一个用户列表组件只负责渲染用户数组，而获取用户数据的逻辑放在父组件或服务中传入。
将业务逻辑外提到工具函数或服务中
不要把计算、校验、API 调用写在组件内部。提取到纯函数或服务类中，便于独立单元测试。
- 比如表单验证逻辑写成一个 validateUser(data) 函数，可以直接导入测试，无需渲染组件。
- API 请求封装在 service 模块里，测试时可以轻松 mock，避免真实网络请求。
使用依赖注入控制外部依赖
组件如果直接调用全局方法或创建依赖，测试时难以替换。通过 props 或依赖注入传入，提升可测性。
立即学习“前端免费学习笔记（深入）”；
Vuex参考手册 中文CHM版
下载
Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如 零配置时空旅行般（基于时间轴）调试，以及状态快照 导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！
- Vue 中可以通过 provide/inject 传入服务实例；React 可通过 context 或直接 props 传递函数。
- 比如组件需要发送通知，不要直接调用 notification.success()，而是接收一个 onNotify 回调。
- 测试时传入 jest.fn() 就能断言是否被调用。
合理使用状态管理但避免过度抽象
Redux、Pinia 等状态管理适合共享状态，但不要为了“规范”把所有状态都放进去。
- 本地 UI 状态（如表单输入、弹窗开关）保留在组件内，用 useState 或 ref 管理，测试时可通过模拟用户交互验证。
- 共享状态才放入 store，并确保 action 和 mutation 是纯函数或可 mock 的方法。
- store 的逻辑应独立测试，不依赖组件渲染。
编写可断言的输出与事件
组件的行为要能被观察和验证。通过 props 控制显示内容，通过 emit 或回调暴露行为。
- Vue 组件触发事件用 $emit，测试时监听即可；React 用回调函数 props。
- 避免测试“点击后发生了什么副作用”，而是测试“点击后是否触发了正确的回调”。
- 使用 @testing-library/vue 或 @testing-library/react，以用户行为角度写测试，更贴近真实使用。
基本上就这些。架构上早做规划，测试就不会变成负担。关键是把变化的部分隔离出来，让组件像乐高一样可拆可换。
