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)
        })
      })
    })

但是当我运行它时，我收到错误...

未捕获的TypeError：无法设置属性＆＃39; title＆＃39;未定义的Uncaught TypeError：无法设置属性＆＃39; title＆＃39;未定义的

为什么我的组件未定义＆＃39; ？

感谢您的反馈

Answer 1

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

这应解决问题。

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

作者发现：应该将属性设置为组件对象被移入it单元测试块。

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

1 个答案: