理解 Mock 的本质是打破前后端联调壁垒的第一步前言一个常见的团队协作困境在日常开发协作中前端与后端常常面临以下尴尬局面前端同学页面写完了但后端接口还在开发中只能干等或者手动写死data: []来占位。后端同学负责的微服务依赖第三方支付网关或复杂的数据库状态本地测试时既不可能真实扣费也不可能随时造出“余额不足”的异常场景。写单元测试时测试代码一跑就去请求真实数据库不仅慢而且每次跑完数据都变了测试结果不稳定。这种“干等”“不敢测”“测不准”的僵局正是Mock技术大显身手的地方。然而不少新手误以为 Mock 就是Mock.js造几个假名字这仅仅是冰山一角。本文将从全栈视角出发首先说清楚 Mock 是什么、为什么用然后横向对比前后端 Mock 的本质差异与各自工具链再纵向落地到Vue 3 Vite项目中进行实战演练最后补充后端的 Mock 示例作为扩展阅读。读完这篇应能独立完成前端联调也能看懂后端同事写的Mock单元测试代码。一、什么是 Mock全栈通用定义1.1 官方定义在软件工程中模拟对象Mock Object是以可控的方式模拟真实对象行为的假的对象。它充当复杂、不可用或不可预测的依赖项如数据库、API 或外部服务的替代品。通俗来说用一个“替身”代替真实的依赖组件让开发者能专心测试自己的业务逻辑而不用担心那些外部依赖的问题。1.2 经典比喻碰撞测试假人这个比喻来自维基百科程序员创造模拟对象来测试其他对象的行为很类似汽车设计者使用碰撞测试假人来模拟车辆碰撞中人的动态行为。汽车设计师不可能每次都找真人去撞车——成本太高、不安全、不可控。软件开发者不可能每次都去请求真实数据库或调用真实支付接口——太慢、不稳定、有副作用。碰撞测试假人就是真实人体的“Mock 对象”而模拟对象就是真实依赖的“Mock 对象”。两者的本质一致用一个安全、可控的替身替代真实但危险、不可控的实体。1.3 什么时候需要 Mock根据维基百科的总结以下情形可能需要使用模拟对象来代替真实对象真实对象的行为不确定例如当前时间、当前温度、随机数。真实对象很难搭建例如需要复杂的容器环境才能构造的HttpServletRequest对象。真实对象的行为很难触发例如网络超时、数据库连接失败等异常场景。真实对象速度很慢例如完整的数据库测试之前可能需要初始化大量数据。真实对象可能还不存在例如后端接口尚未开发完成。真实对象包含不适合测试的信息或方法例如会产生真实扣费或发送真实邮件。总结只要某个依赖让测试变慢、变难、变不稳定或者根本还不存在就可以考虑用 Mock 替换它。二、为什么需要 Mock四大核心价值2.1 隔离测试精准定位 Bug假设要测试一个“下单”功能。真实代码同时调用了数据库、风控系统和物流 API。一旦报错很难判断是哪个环节出了问题。用 Mock 把周边依赖全替换掉只测试“下单”逻辑本身。哪里出问题一目了然。2.2 消除不确定性让测试稳定真实环境下支付接口可能网络超时数据库可能偶尔报错。用 Mock 可以固定返回“成功”或“失败”的预设结果让测试结果不再随外部环境波动——今天跑是绿的明天跑还是绿的。2.3 模拟极端情况兜底测试真实的数据库很难触发“磁盘满了”或“连接超时”这种罕见异常。但用 Mock可以轻松模拟这些极端情况验证自己的代码在异常发生时会不会崩溃。2.4 解耦团队并行开发在前后端分离的开发模式下Mock 数据是并行开发的基础设施。前端不需要等后端接口写好再开工后端也不需要等前端页面做好再调试接口。各自用 Mock 把对方“替”掉并行推进。三、核心概念测试替身Test Double大家族在深入前后端对比之前有必要先了解一个更大的概念框架——测试替身Test Double。“Test Double”这个词由 Martin Fowler 提出类比电影中的“特技替身”Stunt Double。在测试中我们用各种“替身”来替代真实对象。Mock 只是其中一种。根据 Martin Fowler 和业界共识测试替身主要分为以下五类类型英文核心特征使用场景虚设对象Dummy仅用于填充参数从未被真正使用满足方法签名要求但测试中不关心它伪对象Fake有真实工作实现的简化版本如内存数据库集成测试需要真实但轻量的行为桩对象Stub提供预设的“罐头回答”不关心被调用了几次需要可控的返回值但不验证调用行为间谍对象Spy包装真实对象记录调用信息供事后验证需要部分真实行为同时记录调用模拟对象Mock预设期望验证是否按预期被调用需要验证交互行为是否正确Mock 与 Stub 的核心区别这也是不少新手容易混淆的地方Stub桩只负责“回话”。你给我什么输入我死板地返回预设输出。不关心你调没调、调了几次。Mock模拟不仅回话还“记账”。它会验证“这个函数到底被调用了没调用了几次传参对不对”——它会验证行为。用大白话总结Stub 是“你说什么我答什么”Mock 是“我不仅要答还要检查你是不是按规矩问的”。四、核心对比前端 Mock vs 后端 Mock全栈对照表不少前端同学在阅读后端测试代码时会对when().thenReturn()和verify()感到陌生。下面这张表格从替身对象、核心目的、触发时机、主流工具、关注点五个维度厘清了前后端 Mock 的差异对比维度前端 Mock后端 Mock替身对象浏览器的XMLHttpRequest/fetch请求、第三方 JS-SDK如微信 JSSDK、LocalStorage / SessionStorage数据库 DAO/Repository 层、Redis 缓存、消息队列MQ、第三方 HTTP 客户端如 OkHttp、文件系统核心目的解耦 UI 渲染与后端 API在无真实数据时构建页面重点模拟 Loading、空状态、超长文本溢出等视觉边界条件解耦业务逻辑与基础设施在单元测试中不依赖真实数据库和网络重点验证数据计算与流转的正确性触发阶段开发联调阶段npm run dev、视觉回归测试后端构建阶段mvn test/gradle test、持续集成CI流水线主流工具Mock.js、MSWMock Service Worker、vite-plugin-mock、Jest/VitestJava 生态Mockito/PowerMockGo 生态gomockPythonunittest.mock核心关注点响应数据字段名和类型是否匹配、UI 样式是否因数据长度异常而错乱方法调用次数verify、入参匹配规则anyString()、预期异常类型是否正确抛出举个例子秒懂差异前端 Mock 场景后端接口还没部署前端用 Mock 返回{ code: 0, data: { name: 张三 } }。前端关心的是“张三”这两个字在页面上显示得是否美观、有没有溢出、空状态图是否正常显示”。后端 Mock 场景后端要测试UserService.getUserById(1)这个方法。但getUserById内部调了UserMapper.selectOne(1)去查真实数据库。测试时用 Mockito 把UserMapper替换掉设定when(selectOne(1)).thenReturn(mockUser)。后端关心的是“当 Mapper 返回 mockUser 后Service 层是否正确地给这个用户加了 VIP 等级标记”。五、全栈通用准则边界隔离原则在编写任何 Mock 代码前有一条需要牢记的原则只 Mock 外部边界不 Mock 内部核心业务逻辑。外部边界HTTP API、数据库连接、文件 I/O、第三方支付网关、消息队列。这些资源不受开发者控制且极易产生副作用如真实扣费应通过 Mock 隔离。内部核心自己编写的纯函数如金额计算器、权限校验器、数据格式化函数。不建议 Mock 这些逻辑应使用真实代码执行否则测试将失去意义——跑过了也不代表真实逻辑没问题。后果警示如果把内部核心逻辑也 Mock 掉测试就会变成“自欺欺人的绿色假象”——测试全绿上线全崩。六、前端实战一Vue 3 Vite 项目中的 Mock 落地vite-plugin-mock现在进入实战环节。在 Vue 3 官方标配的 Vite 构建工具下vite-plugin-mock是目前侵入性较低、配置较简单的解决方案之一。它的一大优势是零污染业务代码开发者无需将axios.get(/api)修改为其他地址插件会在开发服务器层面自动拦截匹配的请求。6.1 安装依赖bashnpm install vite-plugin-mock mockjs -D注释-D表示--save-dev即仅安装在开发依赖中不会被打包到生产环境。mockjs用于生成随机数据如随机姓名、图片、邮箱vite-plugin-mock则是 Vite 的插件负责拦截请求并返回模拟数据。6.2 配置vite.config.tstypescriptimport { defineConfig } from vite import vue from vitejs/plugin-vue import { viteMockServe } from vite-plugin-mock export default defineConfig(({ command }) ({ plugins: [ vue(), viteMockServe({ mockPath: mock, // 约定根目录下的 mock 文件夹存放源码 enable: command serve, // 只有开发环境npm run dev才开启 mock buildEnable: false, // 构建时强制关闭双重保险 watchFiles: true, // 监听 mock 文件变化 logger: true, // 在控制台显示请求日志 }), ], }))注释command serve是 Vite 提供的环境判断方式——npm run dev时command为servenpm run build时为build。buildEnable: false作为第二道保险确保 Mock 不会被意外打包到生产代码中。6.3 在根目录编写mock/user.ts接口定义在项目根目录不是src里新建文件夹mock在里面新建user.tstypescriptimport { MockMethod } from vite-plugin-mock import Mock from mockjs export default [ { url: /api/user/info, method: get, response: () ({ code: 0, data: Mock.mock({ name: cname, // 生成随机中文姓名 avatar: image(100x100), // 生成随机图片 URL email: email, // 生成随机邮箱 date: date, // 生成随机日期 }), }), }, { url: /api/user/login, method: post, response: ({ body }) { // 可以根据请求体中的参数返回不同数据模拟真实接口的逻辑分支 if (body.username admin) { return { code: 0, token: mock-jwt-token } } return { code: -1, message: 认证失败请检查用户名 } }, }, ] as MockMethod[]注释cname、image、email、date是 Mock.js 的数据占位符Data Placeholder DefinitionDPD用于生成各种格式的随机数据。name: cname这种属性名: 占位符的写法属于数据模板定义规范Data Template DefinitionDTD。6.4 Vue 组件中的调用vuetemplate div p用户名{{ userInfo.name }}/p img :srcuserInfo.avatar alt头像 / p邮箱{{ userInfo.email }}/p /div /template script setup langts import { ref, onMounted } from vue import axios from axios // 使用 ref 包裹数据保持 Vue 的响应式 const userInfo ref({}) onMounted(async () { // 直接请求真实生产环境预期的地址即可 // vite-plugin-mock 在开发层自动拦截业务代码不用改 const { data } await axios.get(/api/user/info) if (data.code 0) { userInfo.value data.data } }) /script注释这里使用ref包裹数据是因为 Vue 的响应式系统要求只有被ref或reactive包裹的数据模板才能感知到变化并重新渲染。如果直接写let userInfo {}数据变化了页面也不会更新。6.5 验证效果启动项目bashnpm run dev打开浏览器 F12 查看 Network 面板会发现请求状态是200返回的数据正是 Mock 定义的假数据。vite-plugin-mock的一个特点是网络控制台会正常显示模拟的网络请求而传统的Mock.js直接拦截 Ajax 时控制台不会有任何请求记录。七、前端实战二进阶方案 —— MSWMock Service Worker如果项目对 Mock 方案的专业性、可复用性、跨环境能力有更高要求可以了解一下MSWMock Service Worker——目前前端社区认可度较高的方案之一。7.1 什么是 MSWMSW 是一个用于浏览器和 Node.js 的 API Mock 库。它通过在浏览器中注册一个 Service Worker在网络层面拦截请求。注释Service Worker 是浏览器的一个底层 API原本用于实现离线缓存和推送通知等功能。MSW 利用它来拦截网络请求。7.2 MSW 的主要特点环境无关不依赖任何框架或请求库。无论用原生fetch、Axios、React Query 还是 ApolloMSW 都能拦截。网络级拦截不篡改fetch或XMLHttpRequest的原生方法而是利用浏览器标准 API 在网络层拦截真实请求。可复用同一套 Mock 代码可以在开发、集成测试、端到端测试E2E、Storybook 中复用。7.3 MSW 与 vite-plugin-mock 的对比对比维度vite-plugin-mockMSW实现方式基于 Vite 开发服务器的中间件拦截基于 Service Worker 浏览器底层 API 拦截环境支持仅限 Vite 开发环境浏览器 Node.js代码复用性仅开发环境可用开发、测试均可复用学习成本较低配置简单中等需理解 Service Worker 概念适用场景中小型项目、快速原型大型项目、需要 Mock 复用的场景建议新手可以先从vite-plugin-mock入手项目规模扩大后可考虑迁移到 MSW。八、扩展视野后端 Mock 长什么样以 Java Mockito 为例为了建立全栈认知这里展示一段 Java 生态中使用Mockito框架的单元测试代码。即使没学过 Java通过注释也能理解其逻辑。8.1 什么是 MockitoMockito 是 Java 世界中主流的 Mock 框架之一。它允许开发者创建和配置 Mock 对象并验证这些对象上的交互行为。8.2 代码示例java// 导入 Mockito 的静态方法让代码更简洁 import static org.mockito.Mockito.*; import org.junit.jupiter.api.Test; import org.junit.jupiter.api.extension.ExtendWith; import org.mockito.InjectMocks; import org.mockito.Mock; import org.mockito.junit.jupiter.MockitoExtension; ExtendWith(MockitoExtension.class) // 启用 Mockito 的 JUnit 支持 public class UserServiceTest { // Mock创建一个替身用于模拟数据库 Mapper不会真的去连库 Mock private UserMapper userMapper; // InjectMocks将上面的 Mock 对象注入到真实的业务 Service 中 InjectMocks private UserService userService; Test void testCalculateVipLevel() { // 1. 构造假数据 User mockUser new User(); mockUser.setId(1L); mockUser.setScore(85); // 2. 设定替身行为当调用 selectById(1L) 时返回上面造好的假对象 // 这就是“打桩Stubbing” when(userMapper.selectById(1L)).thenReturn(mockUser); // 3. 执行真实业务逻辑这里应跑真正的代码不应用 Mock // 这就是“边界隔离原则”——只 Mock 外部依赖不 Mock 内部逻辑 Integer vipLevel userService.calculateVipLevel(1L); // 4. 断言Assert85 分预期返回 VIP 等级 3 assertEquals(Integer.valueOf(3), vipLevel); // 5. 行为验证Verify确保 Mapper 确实被调用且仅调用了 1 次 // 这就是 Mock 区别于 Stub 的核心——验证交互行为 verify(userMapper, times(1)).selectById(1L); } }8.3 关键点解读Mock创建一个模拟对象不执行真实代码。when(...).thenReturn(...)设定模拟对象的行为——当某个方法被调用时返回什么值。verify(...)验证模拟对象的方法是否按预期被调用——调用了没调了几次参数对不对InjectMocks将 Mock 对象注入到被测试的业务类中。后端 Mock 的一个核心关注点是验证行为verify它关心“这个方法到底被执行了几次参数传对了没有”——这是前端 Mock 工具链中较少涉及但同样重要的概念。九、避坑指南生产环境安全的 4 条注意事项为确保 Mock 机制不会引发线上事故以下四条值得关注9.1 环境隔离前端确认buildEnable: false或使用command serve条件守卫防止 Mock 拦截器被打包进dist产物。后端确认测试依赖的 Scope 限定为test如 Maven 的scopetest/scope防止 Mock 框架被传递至生产 Classpath。后果一旦 Mock 逻辑混入生产环境将导致前端请求永远返回假数据或后端直接抛出ClassNotFoundException引发启动失败。9.2 数据仿真度前端场景中建议利用cname、email、image等占位符生成符合真实格式的数据而非简单的测试1、测试2。否则当真实接口上线时可能因真实数据长度、格式异常而引发布局错乱。后端场景中Mock 对象需完整填充关键字段如 null 值判断分支避免因遗漏属性导致测试通过但线上空指针。9.3 修改 Mock 定义后需重启进程无论是 Vite 插件还是 Maven Surefire 插件均在进程启动时完成文件扫描与路由注册。修改mock目录或测试类源码后建议重启npm run dev或重新执行mvn test以确保变更生效。9.4 避免过度 Mock只 Mock 外部边界API、数据库、文件系统不 Mock 内部核心逻辑。如果一段代码的依赖过于复杂以至于难以 Mock往往意味着需要重新审视代码的架构设计——耦合度可能偏高。十、总结知识点核心要点Mock 的本质用可控的“替身”替代真实依赖隔离外部不确定性Mock vs StubStub 提供预设回答Mock 还要验证交互行为前端 Mock解耦 UI 与后端关注视觉边界和字段格式后端 Mock解耦业务与基础设施关注调用次数和异常处理边界原则只 Mock 外部边界不 Mock 内部核心逻辑环境隔离Mock 代码应限制在开发/测试环境不上线Mock 不仅是前端“等接口”时的权宜之计也可以作为衡量系统架构解耦程度的一个参考。若一个模块的依赖过于复杂以至于难以 Mock往往意味着需要重新审视其设计合理性。希望本文能帮助读者建立一个跨越前后端技术栈的统一 Mock 认知体系。如有收获欢迎收藏、点赞、转发。