使用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方法抛出弃用警告 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

文档中的安装选项未提及任何计算对象.我去了

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