React Testing Library测试NextJS报Cannot read map of undefined

核心成因 #

• 测试导入环节的引用偏差：你直接从pages/services路径导入页面组件做测试时，获取的并非自己编写的原生函数组件，而是经过Next.js框架路由层包装后的高阶组件。在缺少Next.js路由运行所需上下文的测试环境下，这个包装层不会将你手动传入的services prop透传到内部实际渲染逻辑，最终组件接收到的props中不存在services字段，直接调用services.map()就会抛出读取undefined属性的类型错误。
• 组件自身缺少容错兜底：代码中直接对解构得到的services调用遍历方法，没有设置默认值，一旦上游传入的props缺失对应字段，就会直接中断渲染抛出错误。

修复方案 #

• 为组件增加props默认值兜底
  修改组件的参数解构逻辑，给services设置空数组默认值，从根源上避免props缺失时的报错：

  export default function Home ({ services = [] }) {
    // 原有渲染逻辑保持不变
  }
  

• 抽离纯展示逻辑做独立测试
  把当前页面中服务列表的渲染逻辑抽离为独立的通用组件（例如放在src/components/service-list/index.js路径下）。这类独立组件不经过Next.js路由层的包装，测试时直接导入该组件传入测试数据，就能正常接收props完成渲染验证。pages/services.js仅保留路由层的数据获取、组件引用逻辑，拆分后测试链路也会更稳定。
• 直接测试页面组件时补充路由上下文配置
  如果需要直接测试pages目录下的页面组件，需要在测试的render环节补充Next.js路由的模拟Wrapper，提供框架运行所需的路由上下文，确保组件可以正常接收到传入的props。也可以通过Jest的Mock配置，屏蔽框架对页面组件的高阶包装逻辑，让导入的组件就是原生编写的函数组件。

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