首页 文章

在单元测试中将道具传递给组件

提问于
浏览 次
7

我正在尝试使用webpack模板为我的应用程序创建基于Vue和vue-cli的单元测试 .

我阅读了Vue文档，vue-loader，vue-cli和vue-template / webpack（更多！） . 当我尝试对我的组件进行单元测试时，我会使用它 .

const Constructor = Vue.extend(MyComponent)
vm = new Constructor().$mount()

像Vue-template/webpack example和Vue official一样

这工作很好 . 但是当我的组件有一些道具时，这个问题就出现了 . 我试着通过这个

const Constructor = Vue.extend(MyComponent)
vm = new Constructor({
    myprop: 10
}).$mount()

在我的单元测试中，当我试图得到这个道具时，我得到了不确定 . 如何在单元测试中将prop传递给我的组件？

vue.js vuejs2

3 回答

  • 13
    const Constructor = Vue.extend(MyComponent)
vm = new Constructor({
    propsData: { myprop: 10 }
}).$mount()

    见：https://vuejs.org/v2/api/#propsData

    回复于
  • 2

    我通常做什么，我建议创建帮助函数，你可以将 propsData 传递给构造函数 - 它应该是这样的：

    function getComponent(Component, propsData) {
    let Ctor = Vue.extend(Component)
    const el = document.createElement('DIV')
    return new Ctor({propsData, el})
}

    用法非常简单：

    describe('MyComponent.vue', () => {
  it('should do something', () => {
    const vm = getComponent(MyComponent, {
      propName: 'propValue'
    })
    // expectation
  })
})

    如果你没有任何道具，你可以简单地省略将第二个对象传递给辅助函数

    describe('MyComponent.vue', () => {
  it('should do something', () => {
    const vm = getComponent(MyComponent)
    // expectation
  })
})
    回复于
  • 0

    您可以将您的道具定义为数据选项并访问vueInstance.propName以获取道具的值

    回复于

相关问题