在 VUE 项目开发中，大部分需求会涉及 API 数据交互，为了保证项目效率，前端通常需要一个 API 服务器来确保前端开发进度，这就是所谓的 Mock 服务。网络上有许多类型的 Mock 工具，使用不同的方法解决同一个问题。
主要包括两种类型：
拦截器方式的 Mock 工具，在 VUE 中常用的有 axios-mock-adapter ，但是它对于 API 类型的支持不够，如 REST 或者 GraphQL API。
本文带大家来认识一下 Mock Service Worke（MSW），一个功能完善的 API Mock 工具，它可以使用 Service Worker 拦截 HTTP 请求，可以模拟真实的 HTTP 请求，可以使用浏览器的 DevTools 进行查看，并且是在 Service Worker 级别上工作。MSW 也可以用在项目的测试代码中，不必为项目的 HTTP 响应设置额外的测试。
什么是 MSW
Mock Service Worker 是一个 API 模拟库，它使用 Service Worker API 来拦截实际请求。 —— MSW docs
注意：Service Worker 只能在浏览器环境中工作。在 Node.js 环境中，MSW 利用 Node.js 的请求拦截器库，并允许重用来自浏览器环境的相同模拟定义。
什么是 Service Worker
MSW 依赖于 Service Worker，Service Worker 本质上是浏览器在后台运行的脚本，它是完全独立于它正在处理或服务的网页。它们充当了 web 应用程序、浏览器和网络之间的代理服务器，目的是为前端应用程序创建一个良好的离线体验，关于 Service Worker 的更多内容可以参阅《ServiceWorker工作原理、生命周期和使用场景》。而 MSW 就是建立在 Service Worker 的缓存机制之上的。
为了更好的介绍 MSW 的使用，下面从创建一个全新的应用开始。
创建 VUE 应用
使用 Vue CLI 创建一个新的 Vue 应用程序，在终端中，执行下面的命令：
选择第三个选项：
回车后，选择 Unit Testing ，按下空格键，然后回车：
选择 3.x (Preview) ：
然后选择默认选项：
然后选择单元测试项，选择 Jest：
接下来步骤继续默认选项，最后出现下面的内容，输入 N：
创建项目完成后，由于需要用到 AJAX 通讯，下面将安装最熟悉的依赖 axios ，如下：
yarn add axios // 或者 npm install axios --save
复制代码
打开项目文件，创建路径和文件 /src/services/axios.js ，代码如下：
import axios from "axios";
const apiClient = axios.create({ baseURL: "/api",});
apiClient.interceptors.response.use( (response) => { return response.data; }, (error) => { return Promise.reject(error || error.response); });
export const getArticle = async (articleId) => { const response = await apiClient.get(`/articles/${articleId}`); return response;};
复制代码
接下打开项目文件 src/App.vue ，将默认代码替换为以下代码：
<template> <blockquote v-if="error">{{ error }}</blockquote> <div v-if="detail"> <h4> <a :href="detail.url" target="_blank">{{ detail.title }}</a> </h4> <p>{{ detail.content }}</p> </div></template>
<script>import { getArticle } from "@/services/axios";
export default { data() { return { articleId: 3, detail: null, error: null, }; }, async created() { try { this.detail = await getArticle(this.articleId); } catch (error) { this.error = "API服务异常"; } },};</script>
复制代码
现在可以启动项目了，运行代码：
yarn serve // npm run serve
复制代码
打开浏览器，输入地址，将看到异常信息：API服务异常。打开开发者工具，可以看到接口返回 404 状态，这是因为接口不存在导致的。
创建 Mock
先增加依赖 msw ，执行命令：
yarn add msw // npm install msw --save
复制代码
安装完成后，在目录 src 中创建文件夹 mocks，并创建两个文件，分别为 handlers.js 和 browser.js ，分别的用途如下：
/src/mocks/handlers.js 代码如下：
import { rest } from "msw";
const articles = [ { id: 1, title: "Node.js 日志最佳实践指南", content: "在开发阶段，无论是日志记录还是调试，都可以很容易地跟踪程序并检测到错误。但是在生产环境中，应该考虑更多关于日志记录的问题，因为这对于应用程序的监视和故障排除非常关键。", url: "https://xie.infoq.cn/article/a6e152bd9e3a57728437afde2", }, { id: 2, title: "NodeJs 全栈创建多文件断点续传", content: "文件上传，算是项目开发中比较常见的需求，本文将展示如何构建一个多文件断点续传组件，可以同时处理多个文件，并可以在出现异常或者网络中断的情况下恢复上传，可以手动暂停和恢复文件的上传。文章内容涉及前端和后端，算是一个小型的全栈项目，项目将使用 NodeJs、Express、Busboy 和 XMLHttpRequest，并使用自己开发的脚手架 generator-norm 来构建项目。", url: "https://xie.infoq.cn/article/3427efa361522b84ad812d9fb", }, { id: 3, title: "Node.js 日志之winston使用指南", content: "Winston 是强大、灵活的 Node.js 开源日志库之一，理论上， Winston 是一个可以记录所有信息的记录器。这是一个高度直观的工具，易于定制。", url: "https://xie.infoq.cn/article/d4f518381654bfe0d0a6e4f9e", },];export const handlers = [ rest.get(`/api/articles/:id`, (req, res, ctx) => { const { id } = req.params; const data = articles.find((item) => item.id === parseInt(id, 10)); if (data) { return res(ctx.status(200), ctx.json(data)); } else { return res(ctx.status(500)); } }),];
export const defaultHandlers = [];
复制代码
/src/mocks/browser.js 代码如下：
import { setupWorker } from "msw";import { handlers, defaultHandlers } from "./handlers";
export const mocker = setupWorker(...handlers, ...defaultHandlers);
复制代码
至此，Mock 的逻辑基本完成，接下来需要将其引入到项目中，修改文件 src/main.js ，加入下面代码：
if (process.env.NODE_ENV === "development") { const { mocker } = require("./mocks/browser"); mocker.start({ // 对于没有 mock 的接口直接通过，避免异常 onUnhandledRequest: "bypass", });}
复制代码
接下来将在 public 文件夹中生成一个 Service Worker 脚本：
执行完成之后，会创建一个 js 文件，不过不用去做任何修改，再次启动项目，效果如下：
打开开发者工具，查看网络请求，如下：
而 axios-mock-adapter 实现的 Mock 再开发工具中无法查看到。
MSW 用于测试
MSW 的美妙之处在于，可以重用相同的处理代码进行测试。
测试将使用 Vue 测试库（VTL），因为它的设计理念和 MSW 更贴合。测试将模拟客户端请求。接下来修改 package.json 增加 3 个开发依赖库：
"devDependencies": { "@testing-library/vue": "^6.3.4", "@testing-library/jest-dom": "^5.11.9",
复制代码
保存后，执行一下代码：
yarn install // npm install
复制代码
完成后，创建目录 tests/unit , 并创建文件 App.spec.js ，代码如下：
import App from "@/App";import { setupServer } from "msw/node";import { rest } from "msw";import { render, screen, waitFor } from "@testing-library/vue";import "@testing-library/jest-dom";import { handlers } from "@/mocks/handlers";import * as axios from "@/services/axios";
const server = setupServer(...handlers);
const getArticleSpy = jest.spyOn(axios, "getArticle");
beforeAll(() => { server.listen();});
afterEach(() => { getArticleSpy.mockClear(); server.resetHandlers();});
afterAll(() => { server.close();});
describe("App", () => { it("调用API:getArticle 获取文章 id 为 3 的文章信息", async () => { server.use( rest.get("/api/articles/3", (req, res, ctx) => { return res(ctx.status(200)); }) ); render(App); expect(getArticleSpy).toHaveBeenCalledTimes(1); });
it("显示一个服务器异常错误", async () => { server.use( rest.get("/api/articles", (req, res, ctx) => { return res(ctx.status(500)); }) ); render(App); expect(getArticleSpy).toHaveBeenCalledTimes(1); });});
复制代码
上面测试代码只对 API 请求的状态码进行测试，运行下命令：
总结
正如上面介绍的，MSW 不仅可以用于构建 Mock 服务，还能用于测试。
评论