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

【问题标题】：How to manually update vue computed property in test如何在测试中手动更新 vue 计算属性
【发布时间】：2019-11-01 05:57:03
【问题描述】：

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

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

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

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

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

【问题讨论】：

使用任何method 来触发您对computed 属性的更改。您可以使用wrapper.vm.{yourmethod()} 触发该方法
@SatyamPathak 不太确定我是否理解正确。你是否建议在组件中创建一个特殊的方法，我将只用于测试，它会改变计算？我不认为这是一个解决方案......同样在组件中，那些“计算”是来自 vuex 的常见映射事物，不能直接从组件中变异（好吧，从技术上讲，它们肯定可以变异，但它看起来像一些拐杖无论如何都在用于测试的代码中）
有一个 setComputed 方法。这已被删除。在本期中，您将找到一份您仍然可以使用的副本。 github.com/vuejs/vue-test-utils/issues/331

标签： vue.js vuejs2 frontend vuex vue-test-utils

【解决方案1】：

像往常一样，我们可以模拟一切，为了模拟在测试期间计算值发生变化时的行为，我们可以执行以下操作：

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

然后当我们需要在测试期间更改计算时，我们会这样做：

wrapper.vm.someComputed = true;

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

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

await wrapper.vm.$nextTick();

【讨论】：