如何让 Jest 使用 sinon.js Mockajax 替代 Jest 自带的 Mock 功能-JavaScript中文网-JavaScript教程资源分享门户

先来介绍一下 Jest 和 sinon.js：

Jest 是 Facebook 出品的一个 JavaScript 测试框架，受到了很多开发者的认可。它拥有易于上手、高效的测试运行速度等优点。

sinon.js 是一个用来做 JavaScript 单元测试的库，它提供了 spy（监听函数被调用情况） 、 stub（替换函数的返回结果） 和 mock （验证函数的参数是否符合预期） 等功能，用来帮助测试者更方便地验证所写的代码是否符合预期。

在 Jest 中，我们可以使用 Jest 提供的 Mock 功能来进行单元测试，在 Mock 功能之上，还可以集成 sinon.js，使用 sinon.js 的 Mockajax 功能来模拟网络请求的情况，既方便且有效。下面将详细介绍如何使用 sinon.js 的 Mockajax 功能来替代 Jest 自带的 Mock 功能。

Mockajax 简介

Mockajax 是 sinon.js 中的一个功能模块，是用来模拟 AJAX 请求的工具。它可以帮助我们在不需要实际发起 AJAX 请求的情况下，模拟出网络请求的情况，并且可以根据传入的参数来返回一些随机生成的数据。

Mockajax 的使用步骤：

引入 sinon.js 和 sinon-ajax.js
使用 sinon.stub 构造一个 AJAX 请求
使用 server.respondWith 模拟 AJAX 请求的响应数据
触发 AJAX 请求
使用 server.requests 获取 AJAX 请求的具体参数

下面着重介绍下第 3 步的使用方式。

使用 Mockajax 模拟 AJAX 响应数据

下面的示例中，我们假设已有一个 UserService 类，其中有一个 getUserInfo() 方法，我们需要测试该方法的正确性，而该方法需要请求一个网络接口，获取用户信息。代码如下：

// UserService.js
import axios from 'axios';

class UserService {
  async getUserInfo(id) {
    return axios.get(`/api/user/${id}`);
  }
}

export default UserService;

为了测试 getUserInfo() 的正确性，我们需要对请求的结果进行模拟。这时候，我们可以使用 sinon.js 中的 Mockajax 来模拟网络请求的情况。具体代码如下：

// UserService.test.js
import UserService from './UserService';
import sinon from 'sinon';
import axios from 'axios';
import { server } from 'sinon-ajax';

describe('UserService', () => {
  it('getUserInfo() should return user info', async () => {
    // 构造一个 AJAX 请求
    const ajaxStub = sinon.stub(axios, 'get');

    // 当请求的 URL 匹配到 '/api/user/1' 时，返回 JSON.stringify({ id: 1, name: 'Alice' })
    server.respondWith('GET', '/api/user/1', JSON.stringify({ id: 1, name: 'Alice' }));

    const userService = new UserService();
    const res = await userService.getUserInfo(1);

    // 验证请求的 URL 是否符合预期
    expect(ajaxStub.withArgs('/api/user/1').calledOnce).toBe(true);
    
    // 验证响应数据是否符合预期
    expect(res).toEqual({ id: 1, name: 'Alice' });
    
    // 恢复原来的 axios.get 方法
    ajaxStub.restore();
  });
});

以上代码是通过在测试用例中利用 Mockajax 来对 axios.get 方法进行了拦截，使得我们可以预先设置请求的响应结果，从而进行测试的过程。

需要注意的是，当我们使用 Mockajax 进行请求拦截时，在测试用例变量中需要同时引入 sinon.js 和 sinon-ajax.js，以便正确的获取 server 对象和使用其中的方法。

总结

本文介绍了如何使用 sinon.js 的 Mockajax 来模拟 AJAX 请求的情况，从而在 Jest 中替代其自带的 Mock 功能。同时，本文还提供了使用示例代码，并详细讲解了 Mockajax 的实现方式和使用场景，可供开发者参考和借鉴。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ac6e80add4f0e0ff603be1