Vue组件Jest单元测试报错：Cannot read property 'name' of undefined

组件数据流转逻辑 #

• 项目为Vue技术栈开发，各模块职责与数据传递链路为：
  • 订单管理入口Admin.vue组件，在生命周期阶段从后端接口拉取全量订单列表，将返回的订单数组通过prop传递给OrderList组件
  • OrderList组件负责循环渲染列表项，将每一个独立的订单对象作为prop传入Order组件
  • Order组件核心职责是渲染单条订单的概要信息，模板内通过配置了name跳转参数的router-link，可导航至ShowOrder页面展示对应订单的完整详情

单元测试配置说明 #

• 针对Order组件编写了Order.spec.js快照测试用例，测试初始化配置如下：
  • 初始化localVue实例并注册VueRouter，创建独立的测试专用router实例
  • 挂载Order组件时采用shallowMount方式，过程中对router-link、router-view组件做了stub处理
  • 提前定义了完全匹配业务结构的mockOrder测试对象，测试执行时通过propsData传入mockOrder与自定义$route配置，预期可正常生成组件渲染快照

异常具体表现 #

• 测试执行时控制台抛出TypeError: Cannot read property 'name' of undefined
• 报错的代码行定位存在明显错位：指向的行号是Order组件scoped CSS中transition属性所在位置，并非模板内读取order.userInfo.name的业务逻辑代码行，直接导致快照测试完全无法运行

已尝试且未解决问题的方案 #

• 在组件模板中添加v-if="order ? order : error"判断，等待数据加载完成后再触发渲染
• 将Admin.vue中拉取订单的生命周期钩子从created()调整为mounted()
• 参考Vue响应式机制说明，在Order组件的data中新增orderItem字段，在mounted()钩子里通过Object.assign同步传入的order prop数据

当前需要解决的核心问题 #

• 定位该异常的根本触发原因
• 输出对应的可落地解决方法

内容的提问来源于stack exchange，提问作者Kevin T.