Mock Service Worker（MSW）

Mock Service Worker(简称 MSW)是一个 API 模拟工具,由 Artem Zakharchenko 创建。它的独特之处在于在网络层拦截请求:应用代码照常发出真实的 fetch 或 XHR 请求,MSW 在请求真正发出前将其截获并返回预设的模拟响应,应用本身无需知道数据是假的。

概述

传统 Mock 方式常需要在代码里替换请求函数或注入假客户端,侵入性强且与真实运行环境有差异。MSW 改在网络层动手:在浏览器中,它注册一个 Service Worker 拦截请求;在 Node.js(如测试环境)中,它拦截底层请求模块。由于拦截点接近真实网络,开发者写的请求逻辑与生产环境完全一致,Mock 与真实之间可以无缝切换。

核心原理

• 用请求处理器(handler)声明拦截哪些接口以及返回什么响应。
• 浏览器端通过 Service Worker 拦截 fetch/XHR 请求。
• Node 端通过拦截底层请求实现,适配 Jest、Vitest 等测试。
• 同一套 handler 可复用于开发、自动化测试与 Storybook 演示。
• 支持 REST 与 GraphQL 两类接口的模拟。

应用场景

MSW 适合后端接口尚未就绪时的前端并行开发、组件测试中稳定可控的数据、以及 Storybook 或演示环境里展示各种数据状态。因为拦截发生在网络层,同一套 Mock 定义能贯穿开发、测试与文档,减少重复维护。

常见问题

问:MSW 会影响生产环境吗?答:不会。它只在开发、测试或演示时按需启用,生产构建中不注册 Service Worker,真实请求正常发出。

问:和直接 Mock fetch 有何区别?答:直接替换 fetch 属于代码级侵入,和真实环境有偏差;MSW 在网络层拦截,应用代码保持不变,Mock 更真实、更易在开关之间切换。