Javascript Vue组件测试时出现Jest错误，TypeError:无法读取属性'；名称'；未定义的

我有一个具有以下模板的Vue组件。它接收一个对象作为道具。首先，它从

Admin.vue

中

created（）

的后端提取，作为数组传递到

OrderList

，循环，然后作为单个订单传递到

order

。

中的

ShowOrder

组件在其自己的页面上显示单个订单

{{order.orderId}

{{order.daySelected}}

{{order.timeSelected}

{{order.userInfo.name}

{{order.userInfo.street}，
{{order.userInfo.city}


{{order.userInfo.apt}

{{order.userInfo.phone}

...
...
显示细节
导出默认值{
名称：“订单”，
道具：{
订单：{
类型：对象，
默认值：函数（）{
返回{}；
}
}
},
数据（）{
返回{
错误：“错误”
};
}
};

我的

Order.spec.js

如下：

const localVue=createLocalVue（）；
localVue.use（VueRouter）；
const router=new VueRouter（）；
const$route={
路径：“/show order/：id”'
};
浅山{
localVue，
路由器，
存根：[“路由器链接”，“路由器视图”]
});
常数mockOrder={
订单号：123，
巧克力片：24，
燕麦片：0，
营火：12，
选定日期：“1月27日星期三”，
时间选择：“2:30-3:00”，
用户信息：{
apt:“，
城市：“港口”，
电子邮件：“k@gmail.com",
街道：“角道”，
电话：“（123）446-1980”，
姓名：“史密斯先生”
}
};
描述（“Order.vue”，（）=>{
它（“正确渲染”，（）=>{
常量包装=浅量（顺序{
localVue，
propsData：{
命令：模拟命令，
$route
}
});
log（wrapper.html（））；
expect（wrapper.element）.toMatchSnapshot（）；
});
});

我收到的错误如下所示：

 FAIL  tests/unit/Order.spec.js
  ● Test suite failed to run

    TypeError: Cannot read property 'name' of undefined

      72 |   flex-flow: column wrap;
      73 |   margin-top: 1em;
    > 74 |   transition: all 0.2s linear;
         |                                                             ^
      75 | }
      76 | 
      77 | .order-container:hover {

我甚至无法让快照测试正常工作。我在这里阅读了许多其他类似的错误问题，并尝试了模板中的

v-if

，在加载组件之前等待数据。这是怎么回事？如果这是一个对象错误，为什么控制台中有指向我的作用域css的指针而不是

order.userInfo.name

我还尝试将

Admin.vue

中的

created（）

更改为

mounted（）

在Order.vue中，我尝试添加对象，使其基于这些属性进行响应

---

您正在调用

shallowMount（）

两次：一次在测试外部调用

mockOrder

（此调用不是必需的），另一次在测试内部调用

mockOrder

//Order.spec.js
shallowMount（Order，{localVue}）//❌ 没有道具，但不需要这个电话
描述（“Order.vue”，（）=>{
浅山{
localVue，
propsData：{
订单：模拟订单
}
})
})

第一个调用导致错误，因为它的

order

属性默认为空对象，因此

order.userInfo

将是

undefined

，从而导致

order.userInfo.name

的错误

---

解决方案是删除对

shallowMount（）

的不必要的第一次调用，然后再调用后面的其他调用，结果证明这不是由于嵌套子对象而导致的反应性问题，这只是一个测试实现错误。修正成功了，我回到了Admin中的created（），然后，我从数据属性中删除了orderItem，并挂载了钩子，将orderItem添加为被动属性。

  data() {
    return {
      error: "Error",
      orderItem: {}
    };
  },
  mounted() {
    this.orderItem = Object.assign({}, this.order);
    console.log(this.orderItem, "line 65");
  }