Question

我正在尝试使用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传递给我的组件？

Answer 1

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

请参阅：https://vuejs.org/v2/api/#propsData

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

Answer 3

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

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

3 个答案: