React TypeScript下Jest mock Axios接口测试返回undefined问题

问题根因 #

测试报错的核心原因是返回值取值逻辑和断言逻辑不匹配：
你在fetchWeatherData函数中，已经提前取出了响应结构里的forcast字段返回：

// WeatherMocks.tsx 中的返回语句
return response.data.result.weather.forcast;

也就是说调用fetchWeatherData()拿到的结果本身就是forcast对应的字符串值（你mock的场景下就是'Sunny'），而非包含forcast属性的天气对象。此时你在测试中写forecast.forcast，相当于给字符串类型的值读取forcast属性，自然得到undefined。

修复方案 #

二选一即可：

• 方案1（适配当前业务函数逻辑，改动最小）：直接修改测试断言，判断返回值本身等于目标字符串
  把测试文件中的断言行替换为：

  expect(forecast).toEqual('Sunny');
  

• 方案2（适配当前测试断言逻辑）：修改业务函数的返回值，返回完整天气对象
  把WeatherMocks.tsx中的返回语句替换为：

  return response.data.result.weather;
  

  修改后原断言expect(forecast.forcast).toEqual('Sunny')可正常通过。

额外注意事项 #

你当前把真实业务请求函数fetchWeatherData放在__mocks__目录下是不规范的：__mocks__目录是Jest约定用来存放手动mock模块实现的位置，真实业务代码应该放在普通源码目录，避免后续触发Jest自动mock逻辑导致异常。

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