2017-04-24 14 views
5

में घटक के पास पास प्रोप मैं वेबपैक टेम्पलेट के साथ वू और वू-क्ली में आधारित मेरे ऐप के लिए यूनिट टेस्ट बनाने की कोशिश कर रहा हूं।यूनिट टेस्ट

मैंने वू प्रलेखन, vue-loader, vue-cli और vue-template/webpack (और अधिक!) पढ़ा है। जब मैं अपने घटक के लिए यूनिट परीक्षण करने का प्रयास करता हूं, तो मैं इसका उपयोग करता हूं।

const Constructor = Vue.extend(MyComponent) 
vm = new Constructor().$mount() 
तरह Vue official

यह काम ठीक

और Vue-template/webpack example की तरह। लेकिन तर्क यह है कि मेरे घटक में कुछ प्रोप हैं। मैं जब मैं इस प्रोप प्राप्त करने की कोशिश, मैं अपरिभाषित प्राप्त इस

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

साथ और मेरे इकाई परीक्षण में पारित करने के लिए प्रयास करते हैं,। मैं यूनिट टेस्ट में अपने घटक के लिए प्रोप कैसे पास कर सकता हूं? https://vuejs.org/v2/api/#propsData

उत्तर

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

देखें का मूल्य प्राप्त करने के लिए डेटा और पहुँच vueInstance.propName का विकल्प करने के लिए अपने रंगमंच की सामग्री को परिभाषित कर सकते समारोह जहां निर्माता के 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 
    }) 
}) 
2

क्या मैं आमतौर पर करते हैं, और बनाने के लिए क्या मेरा सुझाव है सहायक:

संबंधित मुद्दे