Javascript 无法使用Jest在我的单元测试中呈现Vue组件

我试图在我的Vue单元测试中使用Jest呈现一个组件，但我似乎无法让它工作

日志显示：

TypeError:无法读取null的属性“length”

我试过其他组件，效果很好

差事列表.vue

errands: {
  type: Array,
  default: () => {
    return [];
  }
}

{{statusHeader}}
{{idHeader}}
{{descriptionHeader}}
{{typeHeader}}
{{dateOpenedHeader}}
{{dateClosedHeader}}
{{errad.status}
{{errad.id}
{{errad.description}}
{{errad.type}
{{errad.orderDate}
{{errad.deliveryDate}
{{noCasesText}
{{errorText}}
从“洛达斯”进口；
从“/erradListDetails.vue”导入erradListDetails；
导出默认值{
组成部分：{
ErrandsListDetails：ErrandsListDetails
},
道具：{
组件名称：{
类型：字符串，
默认值：（）=>{
返回“”；
}
},
showMoreText：{
类型：字符串，
默认值：“Visa flerärenden”
},
状态标题：{
类型：字符串，
默认值：（）=>{
返回“状态”；
}
},
dateOpenedHeader：{
类型：字符串，
默认值：（）=>{
返回“Beställt/Anmält”；
}
},
dateClosedHeader：{
类型：字符串，
默认值：（）=>{
返回“Beräknad klar”；
}
},
idHeader：{
类型：字符串，
默认值：（）=>{
返回“Ärendenumer”；
}
},
描述标题：{
类型：字符串，
默认值：（）=>{
返回“Beskrivning”；
}
},
字体标题：{
类型：字符串，
默认值：（）=>{
返回“Typ”；
}
},
文件详细信息：{
类型：字符串，
默认值：（）=>{
返回“Ladda ned beställningen som PDF:”；
}
},
评论详情：{
类型：字符串，
默认值：（）=>{
返回“Noteringar”；
}
},
字表：{
类型：字符串，
默认值：（）=>{
返回“”；
}
},
附件:{
类型：字符串，
默认值：（）=>{
返回“”；
}
},
noCasesText：{
类型：字符串，
默认值：（）=>{
返回“Det finns inget att visa”；
}
},
错误文本：{
类型：字符串，
默认值：（）=>{
返回“Något gick fel”；
}
},
createdOnFallback：{
类型：字符串，
默认值：（）=>{
返回“-”；
}
},
关闭回退：{
类型：字符串，
默认值：（）=>{
返回“-”；
}
},
差事计数器：{
类型：对象，
默认值：（）=>{
返回null；
}
},
差事：{
类型：数组，
默认值：（）=>{
返回null；
}
},
装载：{
类型：布尔型，
默认值：（）=>{
返回false；
}
}
},
数据（）{
返回{
选定区域：-1，
错误：未定义，
加载的错误数：10
};
},
方法：{
toggleExpanded:函数（索引）{
this.selectederland=this.selectederland==索引？-1：索引；
},
loadMore:函数（事件）{
event.preventDefault（）；
此.numberOfErrandsLoaded+=10；
},
切片数组：函数（数组）{
设val=u2;.orderBy（数组，“orderDate”，“desc”）；
返回val.slice（0，this.numberOfErrorDSLoaded）；
}
}
};

另外，请忽略以下事实：该组件尚未完成，并且可能不一定涉及最相关的单元测试用例。我只是想知道为什么这个特定的组件不能在我的测试中作为Vue实例加载

从“@vue/test-utils”导入{shallowMount}”；
从“./erradListTable.vue”导入erradListTable；
让包装纸；
描述（“错误列表表”，（）=>{
在每个之前（（）=>{
wrapper=shallowMount（erradListTable）；
});
之后（（）=>{
wrapper.destroy（）；
});
它（“是一个Vue实例”，（）=>{
expect（wrapper.isVueInstance.toBeTruthy（）；
});
});

---

有人有过同样的问题吗？如果是这样，有人能告诉我你是如何解决的吗？

差事的默认值是

null

。由于安装组件时没有任何道具，因此

null

的默认值将生效。您的模板有

差事.length

，这将导致您观察到的错误

要解决此错误，您可以为

差事装载带有数组的组件

：

wrapper=shallowMount（差事列表{
propsData：{
差事：[]
}
});

…或将默认值从

null

更改为空数组：

导出默认值{
道具：{
差事：{
类型：数组，
默认值：（）=>[]
}
}
}

…或向模板中添加条件（即，

v-if=“差事”

），以便仅在以下情况下取消引用：

^^^^^^^^^^

---

最后一种解决方案是防止用户传入未定义的

null

/

道具，从而导致您遇到相同的错误。
差事
道具的默认值为
null
。由于安装组件时没有任何道具，因此
null
的默认值将生效。您的模板有
差事.length
，这将导致您观察到的错误

要解决此错误，您可以为
差事装载带有数组的组件
：

wrapper=shallowMount（差事列表{
propsData：{
差事：[]
}
});

…或将默认值从
null更改<
const wrapper = shallowMount(ErrandsListTable, {
  propsData: {
    errands: []
  }
})
expect(wrapper.props().errands.length).toBe(0)