將單元測試中的組件傳遞給組件

Question

我試圖爲我的應用程序基於Vue和vue-cli與webpack模板創建單元測試。

我閱讀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

你可以定義你的道具，以數據和訪問vueInstance.propName的選項來獲得道具

Answer 3

我最常做的，什麼我的建議是創建幫手功能，您可以通過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 
    }) 
})