在 Jest 测试套件中使用 axios-mock-adapter

随着前端开发的不断发展，测试已经成为了不可或缺的一部分。在前端开发过程中，我们通常会用到一些第三方库来进行网络请求，如 axios。而在测试过程中，我们需要模拟网络请求的响应，以确保我们的代码能够正确处理这些响应。这就是 axios-mock-adapter 的用处。

axios-mock-adapter 简介

axios-mock-adapter 是一个 axios 的模拟适配器，它可以拦截 axios 发出的请求，并返回我们预先定义好的响应。这使得我们能够在测试中模拟网络请求的响应，而不需要真正地发出请求。

安装 axios-mock-adapter

首先，我们需要安装 axios-mock-adapter：

npm install axios-mock-adapter --save-dev

使用 axios-mock-adapter

在测试文件中，我们需要引入 axios 和 axios-mock-adapter：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

然后，我们需要创建一个 axios 实例和一个 MockAdapter 实例：

const axiosInstance = axios.create();
const mockAxios = new MockAdapter(axiosInstance);

现在，我们可以使用 mockAxios 来拦截 axios 的请求，并返回预先定义好的响应。例如，我们可以这样定义一个 GET 请求：

mockAxios
  .onGet('/users')
  .reply(200, {
    users: [{ id: 1, name: 'John Doe' }]
  });

这个代码片段告诉 mockAxios，当 axios 发出一个 GET 请求到 '/users'，它应该返回一个状态码为 200 的响应，响应内容是一个包含一个用户对象的数组。

现在，我们可以使用 axiosInstance 发出这个 GET 请求，并检查响应是否符合预期：

axiosInstance.get('/users').then(response => {
  expect(response.status).toBe(200);
  expect(response.data).toEqual({
    users: [{ id: 1, name: 'John Doe' }]
  });
});

示例代码

下面是一个完整的测试文件的示例代码：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const axiosInstance = axios.create();
const mockAxios = new MockAdapter(axiosInstance);

describe('axios-mock-adapter test', () => {
  it('should return user info', () => {
    mockAxios
      .onGet('/users')
      .reply(200, {
        users: [{ id: 1, name: 'John Doe' }]
      });

    return axiosInstance.get('/users').then(response => {
      expect(response.status).toBe(200);
      expect(response.data).toEqual({
        users: [{ id: 1, name: 'John Doe' }]
      });
    });
  });

  it('should return error message', () => {
    mockAxios
      .onGet('/users')
      .reply(404, {
        message: 'User not found'
      });

    return axiosInstance.get('/users').catch(error => {
      expect(error.response.status).toBe(404);
      expect(error.response.data).toEqual({
        message: 'User not found'
      });
    });
  });
});

这个测试文件包含了两个测试用例。第一个测试用例测试了成功的情况，它模拟了一个 GET 请求并返回了一个包含一个用户对象的数组。第二个测试用例测试了失败的情况，它模拟了一个 GET 请求并返回了一个包含错误消息的响应。

总结

在 Jest 测试套件中使用 axios-mock-adapter 可以帮助我们模拟网络请求的响应，从而使得我们能够更好地测试我们的代码。通过本文的介绍和示例代码，相信读者已经掌握了如何使用 axios-mock-adapter 进行测试的基本方法。

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