行业标准 JavaScript API 模拟 。
Mock Service Worker 是一个 API 模拟库，允许你编写与客户端无关的模拟并在任何框架、工具和环境中重复使用它们。
控制网络
重点描述网络应如何运行，而不是思考如何模拟请求客户端。
import { http, HttpResponse } from 'msw'import { setupWorker } from 'msw/browser' // Describe the network.const handlers = [ http.get('https://acme.com/product/:id', ({ params }) => { return HttpResponse.json({ id: params.id, title: 'Porcelain Mug', price: 9.99, }) }),] // Enable API mocking anywhere.const worker = setupWorker(...handlers)await worker.start()-
省略实施细节
拦截 REST 和 GraphQL API 请求，无论它们是如何发出的。使用适合你产品的请求客户端，而不是你选择的 API 模拟工具。
-
使用平台
使用标准 Fetch API 处理请求和响应。 尊重网络标准，花时间学习平台，而不是工具。
-
前所未有的重复利用
无需配置、适配器或插件。跨环境和工具重复使用相同的模拟，无论是使用 Vitest 进行集成测试、使用 Playwright 进行自动浏览器测试、Storybook 中的演示展示还是 React Native 应用。 或者同时全部。
随处集成
整个堆栈中网络的单一真实来源。
Porcelain Mug
$9.99
本地开发
通过增强现有 API（第三方和本地）或随时设计它们来快速创建、更改和调试。
$ vitest
❯ components/ProductDetail.test.ts
✓ displays product name
✓ displays net price
✓ handles network errors
Tests 3 passed (3)
Duration 100ms
集成测试
测试顺利路径并根据每个测试覆盖网络行为，以测试最棘手的边缘情况。
Product detail page
✔Displays product item details
Test body
1 Visit /product/abc-123 (XHR) GET 200 api.acme/product/abc-123 2 Assert expected h1.title to have value Porcelain Mug 3 Assert expected p.price to have value $9.99
端到端测试
从测试方程中去除任何 HTTP 调用并专注于用户体验，模拟本地或外部 API。
- Components
+ProductDetail
- Idle
- Network error
- Added to cart
Storybook 展示
模拟精确的网络状态，与整个团队分享你的组件如何处理它。