理念

Mock Service Worker 背后的思维模型。

此页面详细说明了 MSW 和扩展在接近 API 模拟时采用的心理模型。这是一个很棒的页面,可以与那些想知道是什么让 MSW 在概念层面上独一无二的人分享,对于那些渴望更实际视角的人,我们已经准备好了 比较 页面。

¥This page elaborates on the mental models that MSW and, by the extension, you adopt when approaching API mocking. This is a great page to share with people wondering what makes MSW unique on a conceptual level, and for those craving a more practical perspective, we have the Comparison page prepared.

模拟作为独立层

¥Mocking as a standalone layer

Mock Service Worker 与其他 API 模拟解决方案既相似又不同。虽然它为你提供了拦截传出请求并模拟其响应的能力,但它并未与任何特定的测试或开发工具相结合。这个小区别实现了 MSW 提供的大多数好处。

¥Mock Service Worker is simultaneously similar and nothing alike other API mocking solutions. While it provides you with the ability to intercept outgoing requests and mock their responses, it’s not coupled with any particular testing or development tooling. This small distinction enables most of the benefits that MSW provides.

我们确信 API 模拟值得在你的应用中拥有自己的一层。能够随时随地控制网络在各种情况下都很有用,例如测试与网络相关的代码或重现和调试特定的网络场景。当使用 API 模拟作为任何其他工具的功能时,这种级别的控制根本不可能实现,因为你始终会受到该工具的限制。MSW 没有限制。

¥We are convinced that API mocking deserves a layer of its own in your application. Being able to control the network any time and anywhere may come in handy in various situations, such as testing network-related code or reproducing and debugging a particular network scenario. Such level of control is simply impossible when using API mocking as a feature of any other tooling because you will always be limited by that tooling. There are no limits with MSW.

模拟与网络行为

¥Mock vs Network behavior

你可能会发现我们在本文档中很少使用术语 “mocks”。从历史上看,这个术语具有强烈的负面关联,因为开发者开始将模拟视为肮脏、不可靠和黑客的东西。因为在 MSW 出现之前它一直如此。

¥You may find us seldom using the term “mocks” in this documentation. Historically, there’s been a strong negative association with this term as developers come to see mocking as something dirty, unreliable, and hacky. Well, because it was until MSW came along.

MSW 在拦截传出网络流量时使用最小入侵框架。这意味着通过在浏览器中使用指定的 Service Worker 或在 Node.js 中实现专注于代码完整性的自定义请求拦截算法,完全无需更改你的代码。我们付出了大量的努力来尊重你的应用,作为回报,我们创造了一个新术语 — 网络行为。

¥MSW utilizes minimal intrusion framework when it comes to intercepting outgoing network traffic. This means having zero changes to your code altogether by using a designated Service Worker in the browser, or implementing custom request interception algorithms in Node.js that focus on the integrity of your code. We’ve put a ton of effort into respecting your application and, as a favor in return, we’re coining a new term—network behavior.

网络行为是对网络预期状态的类似合同的描述。“当请求 X 发生时,用 Y 进行响应。” 这正是你在使用 MSW 时将要处理的抽象级别,并且它是读取、扩展和维护良好的级别。

¥Network behavior is a contract-like description of the network’s expected state. “When request X happens, respond with Y.” This is precisely the level of abstraction you will be working with when using MSW, and it is a level that reads, scales, and maintains well.

使用平台

¥Using the platform

如果你过去使用过任何 API 模拟解决方案,你就会知道它们的语法和实现方面会有很大差异。从方法链接到控制器定义,从在 JSON 文件中列出网络场景到采用类似框架的路由。总是有很多特定的知识需要牢记,这些知识不会超出特定工具的范围,而且通常不会教你在模拟 API 时要做什么。

¥If you’ve used any API mocking solutions in the past, you know how much they can vary in terms of their syntax and implementation. From method chaining to controller definitions, from listing network scenarios in a JSON file to adopting a framework-like routing. There’s always a lot of specific knowledge to keep in mind, knowledge that doesn’t stretch outside particular tools and, oftentimes, doesn’t teach you about what is it you’re doing when mocking APIs.

我们认为开发者教育是开发者体验不可分割的一部分。我们不断努力,以尽量减少你使用 MSW 所需的特定于库的知识量。相反,我们依赖标准 API 和平台功能,因此你实际上会学习如何处理请求和响应(我们会发送更少的代码,这太棒了!)。

¥We see developer education as an inseparable part of the developer experience. We dedicate constant effort to minimize the amount of library-specific knowledge you need to have to use MSW. Instead, we rely on standard APIs and platform features so you would actually learn how to work with requests and responses (and we would ship less code, which is yay!).

我们采用 WHATWG Fetch API 规范,这意味着每个拦截的请求都是一个实际的 Request 实例,每个模拟的响应都是一个实际的 Response 实例。我们采用 Service Worker API 来拦截浏览器网络级别的请求,这样你的应用和测试就不会对模拟一无所知。我们依赖语义和标准,而不是设计自定义 API 来满足特定用例。这也是许多开发者信任我们并提供 CI/CD 管道的原因之一。

¥We embrace the WHATWG Fetch API specification, meaning that each intercepted request is an actual Request instance, and each mocked response is an actual Response instance. We embrace the Service Worker API to intercept requests on the browser’s network level so that your application and tests would know nothing about mocking in place. We depend on semantics and standards instead of contriving custom APIs to satisfy particular use cases. And this is one of the reasons why so many developers trust us with their CI/CD pipelines.

例如,你可以这样在 MSW 中使用模拟重定向进行响应:

¥For example, this is how you respond with a mocked redirect in MSW:

http.get('/old', () => {
  return new Response(null, {
    status: 302,
    headers: {
      Location: '/new',
    },
  })
})

服务器的视角

¥Server’s perspective

使用 MSW 时,你将编写 请求处理程序 来拦截和响应请求。从服务器的角度处理这些处理程序很重要,因为实际上,你正在描述服务器在特定场景中的行为方式。

¥When working with MSW, you will be writing request handlers to intercept and respond to requests. It’s important to approach those handlers from the server’s perspective since, effectively, you are describing how the server should behave in a particlar scenario.