Question

当滑块的值发生变化时（为了简化起见，我忽略了这一点），我正在使用计算的getter和setter来计算和更新localIngredient。

getter会计算数据来填充滑块，并在移动滑块时使用计算的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

理想情况下，滑块将具有隐藏的<input>，其中包含该值以用于辅助功能。通过mount或shallowMount安装组件后，可以以编程方式在该输入上设置值，在下一个刻度线之后将触发setter方法。

对Vue计算的Setter进行单元测试

1 个答案: