使用Jest测试Vue组件：toggleExpanded触发后selectedErrand值异常排查

你遇到的这个报错原因其实很直接——你在测试里调用toggleExpanded时，没有传入它必需的index参数。

咱们看一下组件里的toggleExpanded方法逻辑：它需要接收一个index参数，用来判断当前选中项是否和传入的索引一致，如果一致就把selectedErrand设为-1，否则就设为这个索引值。但你在测试代码里直接调用了wrapper.vm.toggleExpanded()，没有传任何参数，这时候方法里的index会是undefined。

执行逻辑就变成了：this.selectedErrand === undefined（也就是初始的-1 === undefined），结果是false，所以this.selectedErrand被赋值为undefined，这就导致你后续用toBeGreaterThanOrEqual(0)断言时，收到的是undefined而非数字，自然触发了报错。

解决方法很简单，只需要在调用toggleExpanded时传入一个有效的数字索引，模拟模板里点击表格行时传入的参数就行。修改后的测试代码如下：

it("Test", () => { 
  wrapper.setData({ selectedErrand: -1 }); 
  // 传入一个有效的index，比如0，模拟点击第一行的场景
  wrapper.vm.toggleExpanded(0); 
  expect(wrapper.vm.selectedErrand).toBeGreaterThanOrEqual(0); 
});

如果想要覆盖完整的切换逻辑，还可以加一个测试用例，验证再次点击同一行时selectedErrand会切回-1：

it("Test toggleExpanded resets selectedErrand to -1 when clicking the same row", () => { 
  const testIndex = 0;
  wrapper.setData({ selectedErrand: testIndex }); 
  wrapper.vm.toggleExpanded(testIndex); 
  expect(wrapper.vm.selectedErrand).toBe(-1); 
});

记住，测试要尽量模拟组件的真实使用场景，模板里是通过循环传入index来调用方法的，所以测试时也得遵循这个逻辑传参哦。

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