单元测试一个 Vue Computed Setter

Question

我正在使用计算的 getter 和 setter 来计算和更新我的 localIngredient，因为 slider 的值发生变化（为简单起见省略）

getter 计算数据以填充 slider，当 slider 移动时，它应该使用计算的 setter 重新计算原始值

但是，在我的测试覆盖率中，我注意到 setter() 没有被覆盖。 使用 setData() 我可以修改我的内部数据，但是否可以使用 vue-test-utils 来测试调用 setter？

export default {
  props: {
    ingredient: {
      type: Object,
      required: true
    }
  },
  computed: {
    calories: {
      get() {
        return this.localIngredient.value * this.localIngredient.caloriesPerGram
      },
      set(amount) {
        this.localIngredient.value = amount / this.localIngredient.caloriesPerGram
      }
    }
  },
  data: () => ({
    localIngredient: {}
  }),
  created() {
    this.localIngredient = this.ingredient
  }
}

Answer 1

理想情况下，您的 slider 将有一个隐藏的<input>来保存用于可访问性目的的值。 通过mount或shallowMount安装组件后，您可以以编程方式设置该输入的值，在下一个滴答之后将触发 setter 方法。