如何在不Mock整个axios库的情况下用Jest监视axios调用？

你当前测试断言失败的核心原因是spy的目标错误：直接调用axios({...})时，执行的是axios默认导出的函数（或内部的axios.request方法），而非axios.Axios构造函数。以下是无需完全Mock整个axios库的解决方案：

方案1：监视axios默认导出函数 #

通过监视axios的默认导出函数，既能捕获调用行为，又能保留原axios的请求逻辑（让http-request-mock正常拦截请求）：

// myFile.test.ts
import axios from 'axios';
import { myCoolEndpoint } from './myFile';
import HttpRequestMock from 'http-request-mock';

const url = 'https://example.com';

describe('sendUploadRequest', () => {
  const HTTP_MOCK = HttpRequestMock.setupForUnitTest('node');
  HTTP_MOCK.put(url, { foo: 1 }, { status: 200 });
  
  // 监视axios默认导出函数，保留原实现
  const axiosSpy = jest.spyOn(axios, 'default').mockImplementation(jest.requireActual('axios').default);

  it('calls axios with correct parameters and handles response', async () => {
    await myCoolEndpoint();

    // 断言axios被调用
    expect(axiosSpy).toHaveBeenCalled();
    // 验证传入的参数符合预期
    expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
      method: 'put',
      url: url
    }));
  });
});

方案2：监视axios.request方法 #

axios(config)内部最终会调用axios.request(config)，因此也可以直接监视这个方法：

// myFile.test.ts
describe('sendUploadRequest', () => {
  const HTTP_MOCK = HttpRequestMock.setupForUnitTest('node');
  HTTP_MOCK.put(url, { foo: 1 }, { status: 200 });
  
  // 监视axios.request方法，保留原实现
  const requestSpy = jest.spyOn(axios, 'request').mockImplementation(jest.requireActual('axios').request);

  it('calls axios.request with correct parameters', async () => {
    await myCoolEndpoint();

    expect(requestSpy).toHaveBeenCalledWith(expect.objectContaining({
      method: 'put',
      url: url
    }));
  });
});

关键说明 #

• 无需完全Mock整个axios库，通过jest.requireActual保留原axios的功能，确保http-request-mock能正常拦截请求。
• 两种方案都能精准捕获businessLogic中对axios的调用，并验证传入的参数是否符合预期。

内容的提问来源于stack exchange，提问作者Danny