Jest 中对 axios 进行 Mock 的方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要使用到 axios 这个库来进行 AJAX 请求。而在编写单元测试时，我们需要对这些请求进行模拟，以保证测试的稳定性和可靠性。在 Jest 中，我们可以使用一些方法来对 axios 进行 Mock，下面我们将详细介绍这些方法。

Mock Axios

在 Jest 中，我们可以使用 jest.mock 方法来 Mock axios，代码如下：

jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'mocked data' }))
}));

以上代码将 axios 的 get 方法替换为一个 Jest Mock 函数，并返回一个 Promise 对象，该对象的 data 属性为我们期望的数据。这样，在我们的测试用例中，就可以直接调用 axios.get 方法，并得到我们期望的数据。

Axios Mock Adapter

除了直接 Mock axios 外，我们还可以使用 axios-mock-adapter 这个库来进行 Mock。这个库可以帮助我们更加方便地对 axios 进行 Mock，并提供了更多的功能和选项。

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

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

然后，在我们的测试用例中，我们可以这样使用 axios-mock-adapter：

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

const mock = new MockAdapter(axios);

mock.onGet('/api/posts').reply(200, {
  posts: [
    { id: 1, title: 'Post 1' },
    { id: 2, title: 'Post 2' },
  ],
});

axios.get('/api/posts').then((response) => {
  console.log(response.data.posts);
});

以上代码中，我们首先创建了一个 axios-mock-adapter 对象，并将它传递给了 axios。然后，我们使用 mock.onGet 方法来 Mock 一个 GET 请求，并返回我们期望的数据。最后，我们调用了 axios.get 方法，并在回调函数中输出了返回的数据。

使用 Jest Mock Functions

除了以上两种方法外，我们还可以使用 Jest Mock Functions 来 Mock axios。这种方式可以让我们更加灵活地对 axios 进行 Mock，并可以轻松地模拟各种请求和响应情况。

下面是一个使用 Jest Mock Functions 进行 Mock 的例子：

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

const mockAxios = jest.createMockFromModule('axios');

mockAxios.create = jest.fn(() => mockAxios);

mockAxios.get.mockImplementation((url) => {
  if (url === '/api/posts') {
    return Promise.resolve({
      data: {
        posts: [
          { id: 1, title: 'Post 1' },
          { id: 2, title: 'Post 2' },
        ],
      },
    });
  }
});

axios.create = mockAxios.create;
axios.get = mockAxios.get;

axios.get('/api/posts').then((response) => {
  console.log(response.data.posts);
});

以上代码中，我们首先使用 jest.createMockFromModule 方法来创建一个 Mock axios 对象。然后，我们使用 mockAxios.create 方法来创建一个新的 axios 对象，并将它设置为 Mock axios 对象。最后，我们使用 mockAxios.get.mockImplementation 方法来 Mock GET 请求，并返回我们期望的数据。

总结

以上就是在 Jest 中对 axios 进行 Mock 的三种方法。我们可以根据自己的需求和喜好来选择其中的一种或多种方法。在实际开发中，Mock axios 是非常重要的，它可以帮助我们更加方便地进行单元测试，并提高代码的可测试性和可靠性。

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