如何在测试中手动更新vue计算属性

通常,我们可以模拟一切,为了模拟测试期间计算值发生变化时的行为,我们可以执行以下操作:

const wrapper = mount(Component, {
  data() {
    return {
      computedSwitcher: false
    };
  },
  computed: {
    someComputed: {
      get() {
        return this.computedSwitcher;
      },
      set(val) {
        this.computedSwitcher = val;
      }
    }
  }
});

然后,当我们需要改变测试期间的计算值时,我们会:

wrapper.vm.someComputed = true;

换句话说,我们将computed链接到一个模拟的computed switcher,它并不存在于真实组件中,只是为了测试模拟计算行为。

有一点要记住,如果计算值触发了重新渲染,并且我们要检查与此相关的内容,在更改computed之后,还调用

await wrapper.vm.$nextTick();