Jest测试失败：fetch未定义、无法读取undefined的weather属性

两个报错为独立问题，分别排查修复即可：

报错1：ReferenceError: fetch is not defined #

• 根因：Jest默认运行在Node环境，fetch是浏览器原生Web API，18版本以下的Node全局环境无内置fetch实现，执行postInput函数内的fetch调用时直接触发未定义错误。
• 修复方案：
  1. 若使用Node 18及以上版本，修改Jest配置文件jest.config.js，将测试环境切换为jsdom并开启全局fetch支持：

     module.exports = {
       testEnvironment: "jsdom",
       testEnvironmentOptions: {
         customExportConditions: [""],
       },
     }
     

  2. 若使用低版本Node，安装whatwg-fetch依赖，在测试文件头部或Jest全局setup文件中引入import 'whatwg-fetch'即可补全全局fetch。
     注意：单元测试不要发起真实网络请求，建议直接用jest.spyOn(global, 'fetch')模拟fetch返回固定响应结果，保证测试稳定性。

报错2：TypeError: Cannot read property 'weather' of undefined #

• 根因：调用updateUI函数时未传入合法的data参数，函数内读取data.weather时data本身为undefined，从调用栈看有两种触发可能：
  • 编写updateUI单元测试时，直接调用函数未传参，或传入的参数值为undefined
  • postInput函数中fetch请求的返回值解析异常，response.json()返回undefined，传入updateUI时触发报错
• 排查修复步骤：
  1. 检查__test__/testUpdateUI.test.js第10行的调用代码，确认调用updateUI时传入结构完整的模拟数据，数据必须覆盖函数用到的weather/pix/geo三个字段，示例模拟数据：

     const mockFormattedData = {
       weather: { precip: 2.3, max_temp: 26, min_temp: 17 },
       pix: { webformatURL: "test-dest.jpg" },
       geo: { name: "Chengdu" }
     }
     // 调用时必须传入上述模拟数据
     updateUI(mockFormattedData)
     

  2. 提前mock updateUI依赖的浏览器环境和全局对象：函数用到了DOM操作API和全局Client对象的checkCountry/dateDiff方法，测试前置阶段要完成初始化：

     beforeAll(() => {
       // 挂载全局Client对象及依赖方法
       global.Client = {
         checkCountry: jest.fn().mockReturnValue("China"),
         dateDiff: jest.fn().mockReturnValue(5)
       }
       // 插入函数依赖的DOM容器节点
       document.body.innerHTML = '<div id="all-posts"></div>'
     })
     

  3. 若报错是postInput调用updateUI触发，检查fetch的mock逻辑，确保模拟的response.json()返回结构正确的mock数据，不要返回undefined。

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