MSW：可用于浏览器和测试的Mock服务

本文已参与「 掘力星计划」，赢取创作大礼包，挑战创作激励金。

在 VUE 项目开发中，大部分需求会涉及API数据交互，为了保证项目效率，前端通常需要一个 API 服务器来确保前端开发进度，这就是所谓的 Mock 服务。网络上有许多类型的 Mock 工具，使用不同的方法解决同一个问题。

主要包括两种类型：

• 一种是使用服务器语言（如Node.js、PHP）模拟一个服务器
• 另一种是使用拦截器拦截请求然后重定向到前端准备好的处理函数。

拦截器方式的 Mock 工具，在 VUE 中常用的有 axios-mock-adapter ，但是它对于 API 类型的支持不够，如 REST 或者 GraphQL API。

本文带大家来认识一下 Mock Service Worke（MSW），一个功能完善的 API Mock 工具，它可以使用 Service Worker 拦截HTTP请求，可以模拟真实的 HTTP 请求，可以使用浏览器的 DevTools 进行查看，并且是在 Service Worker 级别上工作。MSW 也可以用在项目的测试代码中，不必为项目的 HTTP 响应设置额外的测试。文章涉及的代码在 GitHub 及REST Api相关知识可以参阅专栏《 布道API》。

什么是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 应用程序，在终端中，执行下面的命令：

vue create vue-msw

选择第三个选项：

回车后，选择 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 ，分别的用途如下：

• handlers.js ：主要为定义API逻辑的代码
• browser.js ：使用 handlers.js 中的代码初始化模拟的 service worker

/src/mocks/handlers.js 代码如下：

import { rest } from "msw";

const articles = [
    {
        id: 1,
        title: "Node.js 日志最佳实践指南",
        content:
            "在开发阶段，无论是日志记录还是调试，都可以很容易地跟踪程序并检测到错误。但是在生产环境中，应该考虑更多关于日志记录的问题，因为这对于应用程序的监视和故障排除非常关键。",
        url: "https://juejin.cn/post/7017811851345920037",
    },
    {
        id: 2,
        title: "NodeJs 全栈创建多文件断点续传",
        content:
            "文件上传，算是项目开发中比较常见的需求，本文将展示如何构建一个多文件断点续传组件，可以同时处理多个文件，并可以在出现异常或者网络中断的情况下恢复上传，可以手动暂停和恢复文件的上传。文章内容涉及前端和后端，算是一个小型的全栈项目，项目将使用 NodeJs、Express、Busboy 和 XMLHttpRequest，并使用自己开发的脚手架 generator-norm 来构建项目。",
        url: "https://juejin.cn/post/7015935144007729189",
    },
    {
        id: 3,
        title: "Node.js 日志之winston使用指南",
        content:
            "Winston 是强大、灵活的 Node.js 开源日志库之一，理论上， Winston 是一个可以记录所有信息的记录器。这是一个高度直观的工具，易于定制。",
        url: "https://juejin.cn/post/7018169629176496158",
    },
];
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 脚本：

npx msw init public/

执行完成之后，会创建一个 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请求的状态码进行测试，运行下命令：

sudo npm run test:unit

总结

正如上面介绍的，MSW 不仅可以用于构建 Mock 服务，还能用于测试。