时间戳

首页 > 解决方案 > 单元测试一个 Vue Computed Setter

javascript - 单元测试一个 Vue Computed Setter

问题描述

当滑块的值发生变化时，我正在使用计算的 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
  }
}

标签： javascriptvue.jstestingvue-test-utils

解决方案

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

推荐阅读