行业标准
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 应用。 或者同时全部

随处集成

整个堆栈中网络的单一真实来源。

acme.com/product/abc-123

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

        1Visit/product/abc-123
        (XHR) GET 200 api.acme/product/abc-123
        2Assertexpected h1.title to have value Porcelain Mug
        3Assertexpected p.price to have value $9.99

端到端测试

从测试方程中去除任何 HTTP 调用并专注于用户体验,模拟本地或外部 API。

  • Components
  • +ProductDetail

    • Idle
    • Network error
    • Added to cart

Storybook 展示

模拟精确的网络状态,与整个团队分享你的组件如何处理它。

可与任何现有或未来的工具配合使用

今天就交付更好的产品。

Mock Service Worker 是将 API 模拟集成到整个堆栈的最佳方式。测试、原型设计和调试不会牺牲应用的完整性。试试看吧,它是开源且免费的!

只需 3 步即可开始