如何在 Jest 中 Mock 掉 Axios 的请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 Axios 来发起网络请求。但是在测试中，我们不希望真正发起网络请求，而是希望模拟请求的返回结果。这时候就需要使用 Jest 来 mock 掉 Axios 的请求。

为什么要 Mock 掉 Axios 的请求？

在测试中，我们希望尽可能地模拟真实环境。但是网络请求是不可控的，我们无法保证测试时网络状况的稳定性和一致性。如果测试时发生网络错误，会导致测试失败，这不是我们想要的结果。

为了避免这种情况的发生，我们可以使用 Jest 来 mock 掉 Axios 的请求，模拟请求的返回结果，确保测试的可靠性和稳定性。

如何在 Jest 中 Mock 掉 Axios 的请求？

在 Jest 中，我们可以使用 jest.mock 方法来 mock 掉 Axios 的请求。具体步骤如下：

首先，在测试文件中引入 Axios。
```
import axios from 'axios';
```
然后，使用 jest.mock 方法来 mock 掉 Axios 的请求。
```
jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'mock data' })),
  post: jest.fn(() => Promise.resolve({ data: 'mock data' })),
  // 这里可以添加其他需要 mock 的方法
}));
```
在这个例子中，我们使用 jest.fn 方法来创建一个 mock 函数，然后将其传给 Axios 的方法。当 Axios 的方法被调用时，它将返回一个 Promise，Promise 的结果是一个包含 data 属性的对象，这个对象就是我们模拟的请求结果。

注意：在使用 jest.mock 方法时，需要确保它在所有测试用例之前被调用。

最后，编写测试用例。

describe('test axios', () => {
  it('should return mock data', async () => {
    const res = await axios.get('/api/data');
    expect(res.data).toBe('mock data');
  });
});

在这个例子中，我们测试了 Axios 的 get 方法，并断言返回的数据是我们模拟的数据。

示例代码

下面是一个完整的示例代码：

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

jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'mock data' })),
  post: jest.fn(() => Promise.resolve({ data: 'mock data' })),
  // 这里可以添加其他需要 mock 的方法
}));

describe('test axios', () => {
  it('should return mock data', async () => {
    const res = await axios.get('/api/data');
    expect(res.data).toBe('mock data');
  });
});

总结

在前端开发中，使用 Axios 发起网络请求是很常见的操作。但是在测试中，我们希望尽可能地模拟真实环境，避免网络请求带来的不可控因素。因此，我们可以使用 Jest 来 mock 掉 Axios 的请求，确保测试的可靠性和稳定性。

在使用 jest.mock 方法时，需要注意调用顺序，确保它在所有测试用例之前被调用。同时，我们也可以自定义 mock 函数来模拟不同的返回结果，以满足不同的测试需求。

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