无缝集成
为你提供一层专属的请求拦截层。你的应用代码和测试都无需感知某个请求是否被模拟。
不改应用代码，也不改数据请求层。
DevTools · Network
被这些团队用于生产环境
一层拦截，其余照旧
零偏差
请求与生产环境完全一致的真实资源，从而测试应用的真实行为。既能扩展已有 API，也能在 API 还不存在时按需设计它。
请求头、状态码、响应体都与真实调用保持同构。
熟悉且强大
类 Express 路由语法，参数、通配符、正则都能匹配。状态码、请求头、Cookie、延迟，或完全自定义的解析函数。
fetch, axios, react-query
这些 mock 不必写在 Service Worker 里，而是可以和应用其余部分放在一起。这让采用它变得极其简单。
- 01
在请求已经发起并离开你的应用之后才拦截，所以你的全部代码照常运行。
- 02
把你的应用想成一个盒子。市面上的模拟库都会打开盒子，换掉负责请求的部分。MSW 让盒子保持原样。
- 03
再也不用 stub fetch、axios、react-query。
- 04
同一份 mock 定义可复用于单元测试、集成测试和 E2E 测试，本地开发与调试当然也支持。
什么是 Mock Service Workeryoutu.be同一套逻辑，跑在服务端
Node.js 中并不存在 Service Worker。取而代之，MSW 实现了一套底层拦截算法，复用你在浏览器端完全相同的请求处理函数。
- 不 stub fetch、axios，因此你的测试对模拟过程一无所知。
- 同一份请求处理函数复用于开发、调试和测试，成为所有环境里关于网络行为的单一事实来源。
一份关于网络行为的单一事实来源
- 浏览器setupWorker 启动 Service Worker 拦截请求
- 测试setupServer 复用同一批请求处理函数
- 本地开发不必等待后端接口就绪
- handlers
三个环境共用同一批请求处理函数，不需要适配器或额外配置。
描述网络行为
用类 Express 的路由语法描述请求，再用你已有的语言和工具写出响应。
在应用中发起请求，响应会直接出现在浏览器的网络面板里。
- 参数、通配符与正则匹配
- 状态码、请求头、Cookie 与延迟
- 完全自定义的解析函数
// 1. 导入库
import { http, HttpResponse } from 'msw'
import { setupWorker } from 'msw/browser'
// 2. 用请求处理函数描述网络行为
const worker = setupWorker(
http.get('https://github.com/octocat', ({ request, params, cookies }) => {
return HttpResponse.json(
{
message: 'Mocked response',
},
{
status: 202,
statusText: 'Mocked status',
},
)
}),
)
// 3. 启动 Service Worker，开始模拟
await worker.start()提示：Service Worker 运行在独立线程，但请求处理函数完全在客户端执行。
app.get(
'/checkout/session',
server.boundary((req, res) => {
server.use(
http.get(
'https://api.stripe.com/v1/checkout/sessions/:id',
({ params }) => {
return HttpResponse.json({
id: params.id,
mode: 'payment',
status: 'open',
})
},
),
)
handleSession(req, res)
}),
)提示：server.boundary() 把请求拦截限定在某个闭包范围内。
从文档开始
这个页面只是简要介绍。要了解 Mock Service Worker，没有比官方文档更好的起点。
课程
与 Egghead 合作的高质量付费内容，学习 Web 端 API 模拟的最佳实践。版税收入用于支撑项目的持续开发。
