使用vue-test-utils设置单元测试的Vue计算属性

Question

vue-test-utils提供了一个setComputed方法，允许您设置计算属性的状态。

import { mount } from '@vue/test-utils'
const wrapper = mount(Home)
wrapper.setComputed({loaded: true})

vue-test-utils版本1.1.0.beta为读取setComputed() has been deprecated and will be removed in version 1.0.0. You can overwrite computed properties by passing a computed object in the mounting options的setComputed方法抛出了一个弃用警告

mounting options in the docs没有提到任何计算对象。我试过了

const wrapper = mount(Home, { computed: {loaded: true} })

和

const wrapper = mount(Home, {context: { computed: {loaded: true} }  })

但这些都爆炸了。

为vue-test-utils设置计算属性的方法是什么？

Answer 1

您可以在挂载组件时覆盖计算选项：

const wrapper = mount(Home, {
  computed: {
    loaded() {
      return true
    }
  }
})

但是模拟计算是危险的。您可能会将组件置于生产过程中不能处于的状态。

Answer 2

在Vue 3(它的当前合作伙伴，Vue Test Utils v2 RC 18)中，你仍然可以像@ittus提到的那样对结果进行存根：

const wrapper = mount(Home, {
    computed: {
        loaded() {
            return true
        }
    }
})

然而有一个问题，至少在使用优秀的vue-class-component (v8 RC 1)时是这样。

如果您开始存根一个计算属性，则必须将它们全部存根。否则，它们将返回未定义的值。

所以在这个场景中：

export default class Home extends Vue {
    public get loaded(): boolean {
        return true
    }

    public get tipsy(): boolean {
        return true
    }
}

如果您按照上面的方式挂载它，则结果如下：

wrapper.vm.loaded === true       // true
wrapper.vm.tipsy === undefined   // true

但是，如果在挂载时将它们都存根：

const wrapper = mount(Home, {
    computed: {
        loaded() {
            return true
        },
        tipsy() {
            return false
        }
    }
})

然后这是结果：

wrapper.vm.loaded === true    // true
wrapper.vm.tipsy === false    // true