React测试mock自定义hook useFetch后调用map报undefined错如何解决

TypeError: Cannot read property 'map' of undefined报错的核心原因是mock的useFetch返回结构和真实hook的返回结构不匹配：

• 真实的useFetch直接返回包含error、loading、timerList三个字段的平级对象
• 初始测试代码中mock的useFetch返回的对象多嵌套了一层timerData，导致组件从useFetch返回值中解构timerList时拿到的是undefined，调用.map方法自然触发报错。

修改mock的返回结构，和真实hook的返回结构保持一致，去掉多余的timerData嵌套即可，你后续调整后的代码就是正确实现：

jest.mock("../../../hooks/useFetch", () => ({
    __esModule: true,
    default: () => ({
        error: "",
        loading: false,
        timerList: []
    }),
}));

• 如果需要测试组件加载状态的渲染逻辑，可以将loading字段设为true，同时保留timerList为空数组，避免渲染时报错
• 如果需要测试列表项的渲染逻辑，可以给timerList传入符合业务结构的模拟数据，注意要和真实接口返回的字段保持一致，避免子组件TimerController渲染异常。

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