Question

我有一个具有Vuex绑定Foo的组件mockedVuexBinding（本质上是一个计算道具）。

我想保持测试简单，不想模拟整个商店。我刚刚在测试中用计算存根替换了所有vuex绑定，如下所示：

const wrapper = shallowMount(Foo, {
  computed: {
    mockedVuexBinding: () => 'foo'
  }
}

但是事实证明，我需要测试Foo中的某些行为，该行为基于计算属性的更改。所以我想用一个值更新我的计算值，并测试组件如何对它做出反应（例如发出新值）。

没有类似于setComputed或wrapper.setProps的{{1}}这样的方法，那么我该怎么做？如何用不同的值替换模拟的计算值？

Answer 1

像往常一样，我们可以模拟所有内容，为了模拟测试期间计算值更改时的行为，我们可以执行以下操作：

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

然后，当我们需要在测试过程中计算出变化时，我们这样做：

wrapper.vm.someComputed = true;

换句话说，我们将计算链接到一个仅在真实组件中不存在的模拟的computeSwitcher，仅仅是为了测试模拟计算的行为。

要记住的一件事，如果计算值触发了重新渲染，并且我们想检查与此相关的内容，则在更改计算值后也要调用

await wrapper.vm.$nextTick();

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

1 个答案: