Jest Enzyme中如何为不同useAxios调用的函数设置差异化Mock返回数据

你的问题核心在于每次调用setAxios都会直接覆盖useAxios的Mock返回值，而不是根据传入的getData1/getData2来区分返回。当你执行getdata1.mockReturnValue(setAxios(1))和getdata2.mockReturnValue(setAxios(2))时，这两个setAxios调用会立即执行，后者直接覆盖前者的Mock设置，最终所有useAxios调用都会使用最后一次设置的值。

修正方案：让useAxios根据传入的函数参数返回对应Mock #

我们可以利用mockImplementation（而不是mockReturnValue）来让useAxios的Mock逻辑根据传入的getData函数引用，返回对应的模拟数据：

// 预先定义好两个不同的Mock返回结果
const mockAxiosForData1 = mockUseAxios(withData({ 'test': '123' }));
const mockAxiosForData2 = mockUseAxios(withData({ 'test': '345' }));

// 重写useAxios的Mock实现，根据传入的getData函数判断返回值
useAxios.mockImplementation((getDataFn) => {
  if (getDataFn === getData1) {
    return mockAxiosForData1;
  } else if (getDataFn === getData2) {
    return mockAxiosForData2;
  }
  // 可选：处理未预期的函数传入，避免静默失败
  throw new Error(`Unexpected getData function: ${getDataFn}`);
});

// 若getData1/getData2本身是需要Mock的函数，确保它们返回自身即可（按需调整）
getData1.mockReturnValue(getData1);
getData2.mockReturnValue(getData2);

it('container should be render with component', () => { 
  const {container} = render(<Component />); 
  expect(container.firstChild).toHaveClass('overview'); 
}); 

为什么原来的写法会失败？ #

在你的原始代码中：

• getdata1.mockReturnValue(setAxios(1))会立即执行setAxios(1)，此时useAxios的Mock被设置为对应index=1的数据
• 紧接着getdata2.mockReturnValue(setAxios(2))又立即执行setAxios(2)，直接覆盖了useAxios的Mock设置
• 当组件中调用useAxios(getData1)和useAxios(getData2)时，useAxios的Mock已经被最后一次设置覆盖，所以两者都会返回index=2的数据

另外，你的代码里有个笔误：dat1 = { 'test' : '123' };应该是data = { 'test' : '123' };，记得修正避免潜在错误。

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