How to mock Axios with Jest?

当在使用Jest进行单元测试时，Mock Axios请求是一个常见的需求，因为我们通常不希望在测试中执行真实的HTTP请求。Mocking可以帮助我们模拟请求的响应数据，并确保我们的测试在没有网络连接的情况下也能够运行。以下是如何在Jest中mock Axios请求的步骤：

1. 安装Mocking库（可选）：虽然Jest内置了一些mocking功能，但是我们可以使用像jest-mock-axios之类的库来简化流程。

2. 创建Mock：在测试文件中，我们可以调用jest.mock('axios')来自动mock整个axios模块。这会使得所有的axios调用都被Jest所拦截。

3. 编写Mock实现：接下来，我们可以提供一个mock实现，这样当我们的代码尝试发送一个HTTP请求时，它将返回我们提供的数据。

4. 执行测试：在测试中，我们会检查代码是否正确处理了mock的响应。

5. 验证Mock被正确调用：最后，我们可以检查mock的axios方法（如get 或 post）是否被正确调用，以及调用时是否使用了正确的参数。

以下是一个示例：

javascript
// 引入需要测试的方法和axios
import { fetchData } from './fetchData';
import axios from 'axios';

// 在顶层作用域中mock整个axios模块
jest.mock('axios');

describe('fetchData', () => {
  it('should return data when fetchData is called', async () => {
    // 设置当调用axios.get时返回的数据
    const mockedResponse = { data: { items: ['item1', 'item2'] } };
    axios.get.mockResolvedValue(mockedResponse);

    // 调用需要测试的方法
    const result = await fetchData();

    // 检查预期的数据是否被返回
    expect(result).toEqual(mockedResponse.data.items);

    // 检查axios.get是否被正确调用了一次，并且是被正确的URL调用的
    expect(axios.get).toHaveBeenCalledTimes(1);
    expect(axios.get).toHaveBeenCalledWith('expected-url');
  });
});

在上面的代码示例中，我们模拟了fetchData函数内部调用的axios.get请求，并设置了当它被调用时返回的数据。然后我们执行了一个测试来验证fetchData是否返回了我们在mock中设置的数据，同时也验证了axios.get是否被正确调用了。

这样，我们就可以在不依赖实际网络请求的情况下，测试我们的异步代码能否正确处理HTTP响应。