||

如何在单元测试中为HTTP请求快速打桩

作者sean@smartline.cc

在前端开发中，可以使用 MockJs 之类的工具来拦截 Ajax 请求，以便实现前端和后端的并行开发；但拦截 Ajax 请求有一些局限性，比如在 NodeJs 环境中，HTTP 请求并不是 Ajax 请求，那么使用 MockJs 之类的工具进行拦截就会有问题，同理，单元测试中也会遇到同样的问题。本篇博文将主要以单元测试的请求打桩为例，介绍一种相对通用的请求拦截方案。

HTTP 请求的拦截思路

首先，在使用以 MockJs 为首的前端 Ajax 请求 mock 时，这类工具可以很方便的拦截 BOM 的原生请求，这种方式仅限于浏览器环境；在如今 Node 盛行的时代，如果需要拦截 Node 环境下的 HTTP 请求，就不能使用浏览器那一套了。

Node 环境下的 HTTP 请求可以通过 http 模块来发出来，但是这并不是最终的路子。众所周知的，HTTP 协议是建立在 TCP/IP 协议之上的，HTTP 请求最终走的还是 TCP 协议，所以如果在 TCP 协议进行监听拦截，至少在 Node 环境中是一个比较终极的方案，但这种方式有点小题大做，有种杀鸡用牛刀的感觉。

另外一种方案则相对简单，偏上层应用，也是我今天要介绍的方案。

我们都知道的，目前无论前端开发还是 Node 环境下开发，我们很少回去写原生的 Ajax 或者 http 的 request 的，而是会使用一些开源中间库，例如优秀的 axios ，这是一种广泛使用的 HTTP 请求模块，可以在浏览器和 Node 环境下使用。那么我们尝试去拦截 axios 的请求函数，是否就能实现对请求的 Mock 呢？

答案是肯定的。

所以综上来看，整理起来，如果需要拦截 HTTP 请求，大致可以分为三种思路：

  • 拦截 HTTP 请求的原生发起端，如浏览器环境的 XMLHttpRequest 和 Node 环境下的 http 模块；
  • 直接监听 TCP 协议通道的数据；
  • 拦截上层调用模块，如 axios 等；

从成本上来看，拦截原生的 XMLHttpRequest 或者 http 属于中等成本的，MockJs 使用的是重写 XMLHttpRequest 以实现拦截的方案；直接监听 TCP 通道的数据成本最高，很不划算；拦截应用层的模块成本最低，因为这类偏向应用层的模块一般都兼容了浏览器环境和 Node 环境。

实现方案

首先从具体场景出发。

开发此模块的目的是为了解决单元测试中请求打桩问题，此次项目的单元测试有 Node 端和浏览器端，所以单纯使用 MockJs 已经不太能满足要求，另外一个痛点是 MockJs 没有 removeMock 的方案，在前端开发中一旦打桩完成这个桩将一直有效，某些常见下不是很灵活。

基于上面的问题，我觉得从 axios 模块下手，开发一个模块，来挂载到 axios 模块上，以便可以实现跨端轻松打桩。

基本的功能：

  • 已正则作为 URL 拦截规则；
  • response 可以自定义，且可以随时更改；
  • 可以将桩机关联到其他模块，如 axios ；
  • 可以清除或者移除对某个 URL 的监听；

下来看具体的实现。

URL 匹配

URL 匹配采用正则方案，用户在设置匹配的 URL 时可以传字符串或者正则，这点和 MockJs 类似。

/**
 * 生成一个URL的正则匹配
 * 
 * @param url 地址或正则
 */
function createUrlRegExp(url: string | RegExp): RegExp {
  if (typeof url === 'string') {
    url = url.toString().replace('/', '\\/');
    url = url.replace('?', '\\?');
    return new RegExp(`(.*)?${url}`, 'i');
  }
  return url;
}

createUrlRegExp 方法用于生成一个 URL 的正则对象，用于后续的正则匹配。

需要注意的是，如果传递的 url 是字符串，这里就会采用包含匹配，并不是全等，类似于使用 indexOf 的效果；如果 url 参数本身就是一个正则对象，则原样返回，所以如果用户需要全匹配，完全可以通过写一个正则来实现。

请求类型匹配

这里并没有单独请求请求类型匹配，而是放到了一个类中去完成。

class RequestMock {

  /** response mocked map */
  _mockMap: object
  /** mounted Function */
  _source: Function
  /** bound object */
  _markObj: object
  /** property method of bound object */
  _markMethod: string

  constructor(obj: object, method: string) {
    this._mockMap = {};
    this._source = null;

    if (obj && method) {
      this.mount(obj, method);
    }
  }
}

RequestMock 是一个类，用于实例化一个确定类似的请求拦截器，实例化时需要传入要挂载到的对象及其方法。

例如，将 Mock 实例挂载到 axios 的 get 方法上：

const axios = require('axios');
const reqMock = new RequestMock(axios, 'get');

此时 reqMock 就是一个挂载到 axios.get 方法上的 Mock 实例，之后用户调用 axios.get 方法时将由 reqMock 对象来接管。

具体实现细节可见下文。

Response的自定义和混入

如果使用 MockJs ，就可以发现它所提供的 Random 模块非常强大，可以随机生成常见的各种类型的数据，但另一个局限性在于不便于单元测试。我们在做单元测试时，需要测试某个模块对返回值的处理逻辑，希望可以快速定义某几个字段的值，以便能触发逻辑的判断，在之前是大概率需要重新设置 Mock Response 的，但现在不用了，因为你随时可以向返回值混入你想要的数据。

举个例子，某个接口的请求数据你已经定义好了，在请求正常的情况下，它可以这样返回：

{
  "code": 0,
  "msg": "ok",
  "data": [
    {
      name: "Tom",
      age: 19
    },
    {
      name: "Jack",
      age: 23
    }
  ]
}

假设你现在有一个模块，需要测试请求失败的逻辑（返回值的 code 不为 0)，那么混入就这么做：

const resError = {
  code: 403,
  msg: 'error',
};

reqMock.mock(userList.url, userList.response, { ...resError });

这里要介绍一下 mock 方法，它是用来设置请求拦截的，原型为：

function mock(url: RegExp | string, response: any, mixinData?: object): void

如果传递了需要 Mixin 的数据，那么最后响应的 response 中将会包含混入值。

这样做的一个好处是，我们可以在不改变正常响应定义的情况下，快速的修改响应的数据。

数据混入的实现

混入的实现主要借助了下面的三个方法。

/**
 * 生成一个返回值对象
 * 
 * @param baseRep 基础响应
 * @param mixed 混入的对象
 */
function createResponse<T>(baseRep: T, mixed?: object): T {
  if (!isObject(mixed) || !mixed) {
    return baseRep;
  }
  let baseCopy = { ...baseRep };
  for (let key in mixed) {
    mixin(baseCopy, key, mixed[key]);
  }
  return baseCopy;
}

createResponse 用于生成响应数据，如果预定义的响应不是一个对象时，将直接返回，不处理混入。如果是对象，那么调用 mixin 方法进行逐层混入。

/**
 * 将数据混入到原对象中
 * 
 * @param obj 原对象
 * @param position 混入的位置
 * @param mixdata 需要混入的值
 * @returns 
 */
function mixin<T>(obj: T, position: string, mixdata: any): T {
  if (!isObject(obj) || !position) {
    return obj;
  }

  if (!/\./.test(position)) {
    obj[position] = obj[position] ? assignIn(obj[position], mixdata) : mixdata;
    return obj;
  }

  const key = position.split('.')[0];
  const newPos = position.replace(new RegExp(`^${key}\.`), '');
  obj[key] = obj[key] ? mixin(obj[key], newPos, mixdata) : mixdata;

  return obj;
}

mixin 方法用于处理混入逻辑，其 position 是混入的位置，支持深度混入，所以 position 可以是类似 a.b.c 这样的结构，数据最终会被直接混入到 c 中。

在处理混入时也需要考虑常见的三种类似，如果是数组，那么混入就代表着合并，如果是对象，混入就代表的混合，如果是普通类型，混入则意味着替代。

上面的逻辑在 assignIn 方法中实现：

/**
 * 合入
 * 
 * @param obj 原对象
 * @param data 合人值
 */
function assignIn(obj: any, data: any) {
  if (isArray(obj) && isArray(data)) {
    obj = obj.concat(data);
    return obj;
  }

  if (isObject(obj) && isObject(data)) {
    obj = Object.assign(obj, data);
    return obj;
  }

  return obj = data;
}

设置 URL 拦截的实现

上文已有介绍，URL 的拦截是通过 mock 方法来实现的，其实现如下：

/**
 * 添加一个对传入 URL 的 mock 
 * 
 * @param url 地址
 * @param response 响应值
 * @param mixinData 混入值
 */
mock(url: RegExp | string, response: any, mixinData?: object) {
  const regUrl = createUrlRegExp(url);
  this._mockMap[regUrl.toString()] = createResponse(response, mixinData);
}

其实现非常简单，就是对传入的 URL 转正则，然后保存在一个键值对中。

关键的实现在于下面的 mount 方法，该方法用于挂载当前实例，实现如下：

/**
 * 绑定mock到指定对象的方法上
 * 
 * @param obj 需绑定的对象
 * @param method 需绑定的方法
 */
mount(obj: object, method: string) {
  if (!obj || !method || !obj[method] || !isFunction(obj[method])) {
    throw new Error(`The bound object must have a property method that exists`);
  }

  this._markObj = obj;
  this._markMethod = method;
  this._source = obj[method];

  obj[method] = (url: string, params?: object): Promise<any> => {
    for (let key in this._mockMap) {
      const response = this._mockMap[key];
      key = key.replace(/^\/|\/i|\//g, '');
      const regUrl = new RegExp(key);
      if (regUrl.test(url)) {
        return Promise.resolve(response);
      }
    }
    return this._source(url, params);
  };
}

该方法要求传入的传输必须是对象和字符串，即要挂载在哪个对象的什么方法上。方法的具体实现逻辑其实是一个对被挂载对象指定方法的重写。例如，如果实例化是传入的是 axios 和 get ，则表示将当前 Mock 实例挂载到 axios.get 方法上。

拦截的移除和还原

移除则表示不再监听某个 URL 的请求，其实现对应为删除键值对中的特定键值。

/**
 * 移除对传入 URL 的 mock
 * 
 * @param url 地址
 */
remove(url: string | RegExp) {
  const regUrl = createUrlRegExp(url);
  try {
    delete this._mockMap[regUrl.toString()];
  }
  catch (err) {}
}

而还原则意味着将原来接管的对象的方法进行回滚。

/**
 * 解除绑定
 */
unmount() {
  this._markObj[this._markMethod] = this._source;
  this._source = null;
}

使用示例

上面主要介绍了具体的实现方案，下面来介绍如果使用，总结起来也就三行。

假设有一个 mock 数据如下：

const userList: {
  url: '/app/user/list',
  response: {
    data: [
      {
        name: 'Tom',
        age: 18
      },
      {
        name: 'Jack',
        age: 20
      }
    ]
  }
}

那么使用这个数据来实现特定URL的拦截可以这样写：

// 第一步，实例化
const reqMock = new RequestMock(axios, 'get');
// 第二步，设置 URL Mock
reqMock.mock(userList.url, userList.response);
// 第三步，发送请求
let result = await axios.get('/app/user/list?code-123456');

由于 userList.url 正则可以完成对 /app/user/list?code-123456 的匹配，所以这条请求就被拦截下来了，最后的返回值就是上面的 response 。

最后，如果需要用回 axios.get 方法，可以调用 unmount 进行卸载。

// 移除对 axios.get 的挂载
reqMock.unmount();

之后再使用 axios.get ，就可以按照正常方式发生请求了。

在单元测试中的使用

总体使用跟上面一样，以 jest 框架为例，直接使用一个示例来说明：

describe('Sinple demo', () => {

  const reqMock = new RequestMock(axios, 'get');

  afterAll(() => {
    reqMock.unmount();
  });

  afterEach(() => {
    reqMock.clear();
  });

  it('[GET] should return hello world', async () => {
    const response = 'hello wolrd'
    reqMock.mock(/(.*)\/test\/hello/, response);
    const result = await axios.get(`/test/hello?response=world`);

    expect(result).toBe(response);
  });

  it('[GET] should return success code', async () => {
    const { userList } = mockData;
    reqMock.mock(userList.url, userList.response, { ...resSuccess });
    const result = await axios.get(userList.url);

    expect(result.code).toBe(0);
  });

});

Git 地址

项目的 Git 地址：request-mock-ut

类似文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注