Vue组件Jest测试报错：TypeError: Cannot read property 'sort' of undefined 求助排查

从你提供的代码和报错信息来看，这个错误的根源很明确：组件的conditionSet prop默认值是空对象，缺少conditions属性，导致在计算属性sortedConditions中调用this.conditionSet.conditions.sort()时，conditions是undefined。下面是具体的排查和解决思路：

1. 修复Prop的默认值，确保符合接口定义 #

你的conditionSet Prop类型是ImpressionDataTopConditions，这个接口要求必须有conditions数组，但当前默认值只返回了空对象{}，这就导致默认情况下this.conditionSet.conditions为undefined。修改默认值为符合接口的对象：

@Prop({ 
  default: () => ({
    name: '',
    icon: '',
    conditions: [] // 确保默认有一个空数组
  }), 
  type: Object, 
})
conditionSet: ImpressionDataTopConditions;

这样即使父组件没有传入conditionSet，conditions也会是一个空数组，调用sort方法就不会报错了。

2. 在测试用例中传入合法的Prop数据 #

为了让测试更贴近真实场景，避免依赖默认值，你应该在mount组件时传入符合要求的conditionSet和selectedTopCondition Prop：

it("should mount component without error", () => {
  // 模拟符合ImpressionDataTopConditions接口的数据
  const mockConditionSet = {
    name: "Test Campaign Conditions",
    icon: "fa-bar-chart",
    conditions: [
      {
        name: "Device Type",
        values: {
          value: "desktop",
          altValue: { desktop: 60 },
          total: 1000,
          totalDeliveryPercentage: 60
        }
      }
    ]
  };

  mount(TopConditionSetPresenter, { 
    store,
    propsData: {
      selectedTopCondition: "desktop",
      conditionSet: mockConditionSet
    }
  });
});

3. 给计算属性添加空值保护，提升组件健壮性 #

即使修复了默认值，为了防止意外情况（比如父组件传入了不符合接口的conditionSet），可以在计算属性中先做空值检查，并且注意不要修改原数组（sort方法会改变原数组）：

get sortedConditions(): TopConditionsData[] {
  // 先确保conditions是数组，不存在则用空数组兜底
  const conditions = this.conditionSet?.conditions || [];
  // 解构出一个新数组再排序，避免修改原Prop数据
  return [...conditions].sort(
    (a, b) =>
      (b.values.altValue[this.selectedTopCondition] || b.values.totalDeliveryPercentage) -
      (a.values.altValue[this.selectedTopCondition] || a.values.totalDeliveryPercentage)
  );
}

4. 确认Vuex Store是否提供了组件所需数据（可选） #

如果你的组件原本预期conditionSet是从Vuex Store中获取的（而非通过Prop传入），那需要检查测试中初始化的analytics模块是否包含了正确的state数据，确保组件能从store中拿到合法的conditionSet。不过从当前组件代码看，conditionSet是Prop，所以这个步骤可能不是当前问题的核心，但后续如果有数据从store获取的场景，也需要确认mock store的正确性。

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