vue.js单元测试：为什么我的组件未定义？

Question

我试图建立一个单元测试，如下所示：

    import Vue from 'vue'
    import ChangeTitleComponent from '@/components/ChangeTitleComponent'
    import store from '@/vuex/store'

    describe('ChangeTitleComponent.vue', () => {
      describe('changeTitle', () => {
        var component

        beforeEach(() => {
          var vm = new Vue({
            template: '<div><h2>{{ title }}</h2> <change-title-component :title="title" :id="id"></change-title-component></div>',
            components: {
              ChangeTitleComponent
            },
            props: ['title', 'id'],
            store
          }).$mount()
          component = vm.$refs.changetitlecomponent
        })

        component.title = 'Groceries'
        component.id = '1'

        it('should log the component', () => {
          console.log('CHANGE TITLE COMPONENT: ', component)
        })
      })
    })

但是当我运行它时，出现错误...

Uncaught TypeError：无法设置未定义的属性“ title” Uncaught TypeError：无法设置未定义的属性“ title”

为什么我的组件是“未定义的”？

感谢您的反馈

Answer 1

主要问题是您忘记将ref属性添加到模板中的组件，因此实际上vm.$refs上不存在属性changetitlecomponent 。

这应该解决问题。

<change-title-component ref="changetitlecomponent" :title="title" :id="id"></change-title-component>

作者发现：将组件对象的属性设置应移至单元测试的it块中。