如何在 Jest 中模拟 axios ：正确姿势-JavaScript中文网-JavaScript教程资源分享门户

如果您经常使用 Axios 发起 HTTP 请求，那么您的测试用例可能需要一种方式来模拟 Axios 。 Jest 是一个流行的测试框架，它提供了多种选项来测试 Axios 模块。接下来我们来学习如何正确地使用 Jest 来模拟 Axios。

Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了一个易于使用的 API 封装了 XHR 和 JSONP 请求，同时还支持更高级别的功能，例如拦截请求和响应、自动转换 JSON 数据等。

Jest 简介

Jest 是一个 JavaScript 的测试框架，由 Facebook 开发和维护。它被设计为具有结构简单、速度快、可扩展性强、无需配置的优点。

如何在 Jest 中模拟 Axios

以下是几个要点，帮您正确使用 Jest 来模拟 Axios：

使用 JEST MOCKS

Jest 提供了 Mock 功能，该功能可用于模拟模块导入。Mock 功能将模块导入重定向到一个模块模拟，而不是到源模块。这允许您控制模块的输出，以便您能够在测试中使用假数据来代替正式数据。

下面是一个使用 Jest Mock 的示例代码：

// javascriptcn.com 代码示例
import axios from 'axios';

jest.mock('axios');

test('should fetch users', () => {
  const users = [{id: 1, name: 'Bob'}, {id: 2, name: 'Alice'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp);

  // 您的代码 
});

在示例代码中，我们使用 Mock 将 Axios 模块重定向到 axios_get 请求并返回我们定义的假数据。您可以通过 axios.get.mockResolvedValue() 方法返回一个 Promise，该 Promise 将在异步请求成功时解析。

使用 jest.fn 模拟异步请求

Jest 提供了一个 Mocking 函数的功能，该功能可用于模拟异步请求。

下面是一个使用 jest.fn 模拟异步请求的示例代码：

// javascriptcn.com 代码示例
import axios from 'axios';

test('should fetch users', async () => {
  const users = [{id: 1, name: 'Mary'}, {id: 2, name: 'Tom'}];
  const resp = {data: users};
  axios.get = jest.fn().mockResolvedValue(resp);

  // 您的代码 
});

在示例代码中，我们使用 jest.fn() 将 axios.get() 重写为一个模拟函数，并使用 mockResolvedValue() 方法来设置模拟函数的返回值，使其返回我们定义的假数据。在这个示例中使用 await 作为异步测试的标识符，以便在异步请求完成之后执行测试。

使用 axios-mock-adapter 模拟 Axios

axios-mock-adapter 是一个与 Axios 一起使用的 Mock 适配器。它能够截获 Axios 的请求，直接返回假数据，因此它非常适合用于在 Jest 中测试 Axios 与 Api 之间的交互。

下面是一个使用 axios-mock-adapter 模拟 Axios 的示例代码：

// javascriptcn.com 代码示例
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

test('should fetch users', async () => {
  const mock = new MockAdapter(axios);
  const users = [{id: 1, name: 'Bob'}, {id: 2, name: 'Alice'}];
  const resp = {data: users};
  mock.onGet('/users').reply(200, resp);

  // 您的代码
});

在示例代码中，我们使用 axios-mock-adapter 创建了一个模拟异步请求，并告诉它需要截获和模拟的请求和响应（onGet('') 模拟请求）。利用 reply() 方法做出响应，并通过传递 resolve() 函数使它成为一个 Promise。

总结

模拟 Axios 是 Jest 的基础之一。上述方法可以轻松帮助您在 Jest 中模拟 Axios ，以便更好地测试您的应用程序。建议您依据应用程序的具体场景，选择合适的方法，以便在不同的特定情况下使用它们。

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