Mock Service Worker

JavaScript 行业标准 API 模拟工具。

特性

无缝集成。专用的请求拦截层供您使用。让应用程序的代码和测试无需知晓内容是否经过模拟。
无偏差。请求相同的生产资源并测试应用的实际行为。扩展现有 API，或在尚无 API 时逐步设计。
熟悉且强大。使用类 Express 的路由语法拦截请求。使用参数、通配符和正则表达式匹配请求，并返回必要的状态码、标头、Cookie、延迟或完全自定义的解析器。

"我发现了 MSW，欣喜地发现不仅可以在 DevTools 中查看模拟响应，而且模拟无需编写在 Service Worker 中，而是可以与应用的其余部分共存。这使得采用变得异常简单。能够将其用于测试这一事实，让 MSW 成为了巨大的生产力助推器。"

— Kent C. Dodds

文档

本 README 会为您简要介绍该库，但 Mock Service Worker 最理想的入门之处是其官方文档。

示例

查看 使用示例 列表

课程

我们与 Egghead 合作，为您提供优质的付费学习资料，助您掌握 Web API 模拟的最佳实践。敬请尝试！从中获得的版税将用于支持项目的持续开发。感谢您的支持。

浏览器

工作原理

浏览器中的使用是 Mock Service Worker 与其他工具的不同之处。它利用 Service Worker API（该 API 可拦截请求以进行缓存），在网络层面上使用您的模拟定义来响应被拦截的请求。这样，您的应用程序对模拟操作毫不知情。

观看以下简短演示，了解 Mock Service Worker 在浏览器中的工作方式：

独特之处

此库在网络层面拦截请求，这意味着请求是在“离开”您的应用程序并执行之后被拦截的。因此，您的全部代码都会运行，让您在进行模拟时更有信心；
可以将您的应用程序想象成一个盒子。现有的所有 API 模拟库都会打开您的盒子，移除执行请求的部分，并用一个黑盒取而代之。而 Mock Service Worker 则保持您的盒子完好无损，与生产环境中的状态完全一致。相反，MSW 位于您的盒子旁边的另一个独立盒子中；
无需再对 fetch、axios、react-query 等进行存根（stubbing）操作；
您可以在单元测试、集成测试和端到端（E2E）测试中重用相同的模拟定义。我们提到本地开发和调试了吗？没错，所有这些场景都可以基于相同的网络描述运行，无需适配器或繁琐的配置。

使用示例

// 1. Import the library.
import { http, HttpResponse } from 'msw'
import { setupWorker } from 'msw/browser'

// 2. Describe network behavior with request handlers.
const worker = setupWorker(
  http.get('https://github.com/octocat', ({ request, params, cookies }) => {
    return HttpResponse.json(
      {
        message: 'Mocked response',
      },
      {
        status: 202,
        statusText: 'Mocked status',
      },
    )
  }),
)

// 3. Start mocking by starting the Service Worker.
await worker.start()

在应用程序中执行 GET https://github.com/octocat 请求将返回一个模拟响应，您可以在浏览器的“网络”选项卡中查看该响应：

Chrome DevTools Network screenshot with the request mocked

提示： 您知道吗？尽管 Service Worker 在单独的线程中运行，但您的请求处理器完全在客户端执行。这样，您可以使用相同的语言（如 TypeScript）、第三方库和内部逻辑来创建所需的模拟。

Node.js

它是如何工作的？

Node.js 中不存在 Service Worker。相反，MSW 实现了一种低级拦截算法，该算法可以利用您为浏览器编写的完全相同的请求处理器。这消除了环境之间的界限，让您可以专注于网络行为。

它有何不同之处？

不会对 fetch、axios 等进行存根处理。因此，您的测试完全不知道模拟的存在；
您可以将相同的请求处理器重用于本地开发、调试以及测试。真正实现了跨所有环境和所有工具的网络行为单一事实来源。

使用示例

以下是在开发 Express 服务器时使用 Mock Service Worker 的示例：

import express from 'express'
import { http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'

const app = express()
const server = setupServer()

app.get(
  '/checkout/session',
  server.boundary((req, res) => {
    // Describe the network for this Express route.
    server.use(
      http.get(
        'https://api.stripe.com/v1/checkout/sessions/:id',
        ({ params }) => {
          return HttpResponse.json({
            id: params.id,
            mode: 'payment',
            status: 'open',
          })
        },
      ),
    )

    // Continue with processing the checkout session.
    handleSession(req, res)
  }),
)