如何测试监听 VueX 计算属性的侦听器？告别 setComputed 方法

2024-03-20 12:12:14

测试监听 VueX 计算属性的侦听器：替代 setComputed 方法

问题

在 Vue 中，我们可以使用 watch 选项来监听数据变化，而 mapState 则可以将 VueX 状态映射到组件的计算属性中。当我们需要测试监听此类计算属性的侦听器时，由于 setComputed 方法的弃用，出现了新的挑战。

替代方案

现在，我们有两种主要替代方案来测试此类侦听器：

直接修改 VueX 状态： 这种方法直接修改 VueX 状态，并观察侦听器是否被触发。优点是更接近真实场景，但可能会更脆弱。
使用测试库辅助方法： 例如，Vue 测试工具的 trigger 方法允许我们触发特定侦听器，而无需修改 VueX 状态。这种方法更灵活可靠。

案例演示

场景： 监听 bar 计算属性的变化，并在变化时调用 externalDependency.doThing 方法。

测试：

it('should call externalDependency.doThing with bar', () => {
  const spy = jest.spyOn(externalDependency, 'doThing');
  wrapper.vm.$store.commit('mutationToChangeBar', 'baz');
  expect(spy).toHaveBeenCalledWith('baz');
});

或

it('should call externalDependency.doThing with bar', () => {
  const spy = jest.spyOn(externalDependency, 'doThing');
  wrapper.vm.$nextTick(() => {
    wrapper.trigger('update:bar', 'baz');
  });
  expect(spy).toHaveBeenCalledWith('baz');
});