Jest模拟Axios调用始终进入catch分支问题求助

1. 模拟数据存在语法错误 #

你的mockedResponseDate定义有两处语法问题，直接导致数据格式无效：

• 字段'number: 7引号未闭合，且后端返回的字段是num而非number
• 对象和数组的闭合括号缺失

修复后的模拟数据：

const mockedResponseData = {
  numbers: [ { id: 0, user_id: 1, num: 7, reason: 'test reason' } ]
};

2. Axios Mock未返回Promise #

Axios请求方法本身返回Promise，但你的mock直接返回了普通对象，导致组件中.then()无法正常执行，最终进入catch分支。需要让mock返回一个resolved状态的Promise。

修复后的mock逻辑：

const mockResponse = config => {
  const { method, url } = config;
  if (url === '/user/fav_numbers') {
    // 返回resolved状态的Promise，模拟接口成功响应
    return Promise.resolve({
      status: 200,
      data: mockedResponseData,
    });
  }
  // 对其他请求返回默认错误
  return Promise.reject(new Error('Unknown request'));
};

jest.mock('packs/axios', () => jest.fn(config => mockResponse(config)));

3. 测试逻辑补充（可选） #

可以在测试中添加断言，验证数据是否正确渲染：

test('Display initial numbers from db', async () => {
  render(<favNumbers userId={1}/>);

  await waitFor(() => {
    // 断言页面渲染了模拟的数字7
    expect(screen.getByText('7')).toBeInTheDocument();
    // 断言错误提示未出现
    expect(screen.queryByTestId('error-message')).not.toBeInTheDocument();
  });
});

额外检查点 #

• 确认组件中导入axios的路径和mock的'packs/axios'完全一致，路径不匹配会导致mock失效，触发真实的XMLHttpRequest请求
• 组件内请求URL/user/fav_numbers与mock判断条件一致，这部分无需调整

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