React Jest中Mock Fetch无效，返回真实数据问题排查

我是React测试新手，尝试通过Mock Fetch请求测试异步函数fetchVisit，但运行测试时出现误报：预期Mock Fetch返回模拟数据，却实际返回了数据库的真实数据。请问我哪里操作有误？

待测试函数 #

export const fetchVisit = async (currentUserId, visitDate) => {
  try {
    const visitData = await axios.post(
      `${BASE_URL}/visit/${currentUserId}`,
      visitDate
    );
   
    const {
      data: {
        data: { visit },
      },
    } = visitData;

    
    return visit;
  } catch (err) {
    return err;
  }
};

测试套件代码 #

const mockData = [
  {
    serviceusersToVisit: [[Object], [Object]],
    _id: '1',
    currentUserId: '123',
    __v: 0,
    dateOfVisit: '2022-08-31T00:00:00.000Z',
  },
];

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(mockData),
  })
);

describe('MOCK FETCH OF fetchVisit', () => {
  it('should fetch a single visit', async () => {
    let visitDate = {
      dateOfVisit: '2022-08-31T00:00:00.000+00:00',
    };

    let visit = await fetchVisit('123', visitDate);
    console.log(visit);
    expect(visit.length).toBe(1);
  });
}

错误原因 #

• 你要测试的fetchVisit函数使用axios.post发起请求，而非浏览器原生的fetch API，所以你全局Mock的global.fetch根本不会被调用，实际请求还是通过axios发送到真实后端，自然返回数据库的真实数据。

解决方案 #

需要Mock axios的post方法，而非fetch，同时确保Mock的响应结构和axios返回的格式匹配（你的代码里解构了data.data.visit）：

修改后的测试代码如下：

import axios from 'axios';
// 导入你要测试的fetchVisit函数
import { fetchVisit } from './your-file-path';

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

const mockData = [
  {
    serviceusersToVisit: [[Object], [Object]],
    _id: '1',
    currentUserId: '123',
    __v: 0,
    dateOfVisit: '2022-08-31T00:00:00.000Z',
  },
];

describe('MOCK FETCH OF fetchVisit', () => {
  it('should fetch a single visit', async () => {
    // 配置axios.post的Mock返回值，匹配代码中的解构结构
    axios.post.mockResolvedValue({
      data: {
        data: {
          visit: mockData
        }
      }
    });

    const visitDate = {
      dateOfVisit: '2022-08-31T00:00:00.000+00:00',
    };

    const visit = await fetchVisit('123', visitDate);
    console.log(visit);
    expect(visit.length).toBe(1);
    // 验证axios.post是否被正确调用
    expect(axios.post).toHaveBeenCalledWith(
      expect.stringContaining('/visit/123'),
      visitDate
    );
  });

  // 测试后清理Mock，避免影响其他测试用例
  afterEach(() => {
    jest.clearAllMocks();
  });
});

额外注意点 #

• 用jest.mock('axios')自动Mock整个axios模块，无需手动设置全局变量
• mockResolvedValue用于模拟异步请求成功的返回值，严格匹配axios的响应结构
• 添加断言验证axios的调用参数，确保请求地址和参数符合预期
• 测试后用jest.clearAllMocks()清理Mock状态，防止测试用例间的污染

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