Przepuścić rekwizyty do komponentu w jednostce Test

Question

Próbuję utworzyć test jednostkowy dla mojej aplikacji w Vue i vue-cli z szablonem webpack.

Przeczytałem dokumentację Vue, vue-loader, vue-cli oraz vue-template/webpack (więcej!). Kiedy próbuję wykonać test jednostkowy dla mojego komponentu, używam tego.

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

jak Vue-template/webpack example i jak Vue official

Ta praca dobrze. ale zaimek ma miejsce, gdy mój komponent ma jakieś rekwizyty. Staram się przekazać tej

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

I w moim testów jednostkowych, gdy próbuję uzyskać ten rekwizyt, mam niezdefiniowane. Jak mogę przekazać prop do mojego komponentu w teście jednostkowym?

Answer 1

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

Patrz: https://vuejs.org/v2/api/#propsData

Answer 2

można zdefiniować swoje rekwizyty do opcji danych i dostępu vueInstance.propName aby uzyskać wartość rekwizytu

Answer 3

Co zwykle zrobić, a co proponuję jest stworzenie pomocnika funkcja gdzie można przekazać do konstruktora propsData - powinien wyglądać następująco:

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

Użycie jest bardzo proste:

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

Jeśli nie masz żadnych rekwizytów można po prostu pominąć mijającą sekundą obiektu do funkcji pomocnika

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