Jest测试Vue组件ErrandsListTable渲染失败报TypeError错误求助

这个报错的核心原因非常清晰：你的ErrandsListTable组件中，errands这个prop的默认值被设置成了null，但组件的模板和方法里都直接把它当作数组来使用（比如访问errands.length、传给_.orderBy处理）。当测试时没有传入errands数据，就会使用这个默认的null值，导致读取length属性时抛出错误。

下面是几种可行的解决办法，你可以根据需求选择：

1. 修正errands prop的默认值（推荐） #

既然errands的类型定义是Array，那么它的默认值应该是空数组而不是null，这样组件在没有收到外部传入数据时，也能安全地处理数组相关操作。修改组件props中的errands定义：

errands: { 
  type: Array, 
  default: () => { return []; } // 把null改成空数组
}

2. 测试时传入mock的errands数据 #

如果你暂时不想修改组件代码，可以在测试挂载组件时，通过propsData传入一个空数组或者模拟的 errands 数据：

beforeEach(() => {
  wrapper = shallowMount(ErrandsListTable, {
    propsData: {
      errands: [] // 传入空数组避免null报错
    }
  });
});

3. 在组件中增加空值防护 #

为了让组件更健壮，即使errands意外为null也不会崩溃，可以在模板和方法里添加空值判断：

• 模板中使用可选链操作符：把errands.length改成errands?.length
• 在sliceArray方法里先判断数组是否存在：

sliceArray: function(array) {
  if (!array) return []; // 空值时返回空数组
  let val = _.orderBy(array, "orderDate", "desc");
  return val.slice(0, this.numberOfErrandsLoaded);
}

这三种方法都能解决你当前测试中组件无法正常渲染的问题，其中第一种是最符合Vue prop类型规范的做法。

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