modal - vue.js examples

Pasar accesorios al componente en Prueba Unitaria

Question

Intento crear una prueba unitaria para mi aplicación basada en Vue y vue-cli con plantilla de paquete web.

Leí la documentación de Vue, vue-loader, vue-cli y vue-template / webpack (¡y mucho más!). Cuando intento hacer una prueba unitaria para mi componente, uso esto.

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

como Vue-template / webpack ejemplo y como Vue oficial

Esto funciona bien pero el pronlem es cuando mi componente tiene algunos accesorios. Intento pasar con esto

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

Y en mi prueba de unidad, cuando trato de obtener este apoyo, me vuelvo indefinido. ¿Cómo puedo pasar prop a mi componente en la prueba unitaria?

Answer 1

Lo que suelo hacer, y lo que sugiero es crear una función auxiliar donde puedas pasar propsData al constructor. Debería propsData así:

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

El uso es bastante fácil:

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

Si no tiene ningún accesorio, simplemente puede omitir el segundo objeto que pasa a la función auxiliar

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

Answer 2

puede definir sus accesorios a la opción de datos y acceder a vueInstance.propName para obtener el valor de prop

Answer 3

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

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