如何使用Jest模拟返回图片Buffer的Axios接口请求

实现思路 #

• 首先Mock axios模块，拦截axios.create调用，拿到自定义imageApi实例上get方法的模拟权限
• 构造符合JPEG格式的测试用Buffer模拟接口返回值
• 分别覆盖接口请求成功、请求失败两个场景的测试用例

完整测试代码 #

const axios = require('axios');
// 替换为你实际存放fetchRandomImage的文件路径
const fetchRandomImage = require('./fetchRandomImage');

// Mock整个axios模块
jest.mock('axios');

// 如果测试时提示找不到logger模块，添加下方mock即可
// jest.mock('./logger', () => ({
//   info: jest.fn(),
//   error: jest.fn()
// }));

describe('fetchRandomImage 功能测试', () => {
  // 模拟axios.create返回的实例上的get方法
  const mockAxiosGet = jest.fn();
  beforeAll(() => {
    axios.create.mockReturnValue({
      get: mockAxiosGet
    });
  });

  // 每次测试后清空调用记录，避免用例互相影响
  afterEach(() => {
    mockAxiosGet.mockClear();
  });

  test('请求成功时返回正确的图片Buffer', async () => {
    // 构造和示例格式一致的JPEG开头模拟Buffer
    const mockImageBuffer = Buffer.from([
      0xff, 0xd8, 0xff, 0xe0, 0x00, 0x10, 0x4a, 0x46, 0x49, 0x46, 0x00, 0x01
    ]);
    // 模拟get方法返回正确响应
    mockAxiosGet.mockResolvedValue({
      data: mockImageBuffer
    });

    const testParams = { imageId: 'test123', width: 200, height: 300 };
    const result = await fetchRandomImage(testParams);

    // 校验请求参数是否符合预期
    expect(mockAxiosGet).toHaveBeenCalledWith(
      `/id/${testParams.imageId}/${testParams.width}/${testParams.height}`,
      { responseType: 'arraybuffer' }
    );
    // 校验返回值符合预期
    expect(result).toBeInstanceOf(Buffer);
    expect(result).toEqual(mockImageBuffer);
  });

  test('请求失败时返回null', async () => {
    // 模拟接口抛出异常
    mockAxiosGet.mockRejectedValue(new Error('Network Error'));

    const result = await fetchRandomImage({ imageId: 'err_test', width: 100, height: 100 });
    expect(result).toBeNull();
  });
});

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