유닛 테스트에서 소품을 컴포넌트에 전달합니다.

유닛 테스트에서 소품을 컴포넌트에 전달합니다.

웹 팩 템플릿을 사용하여 Vue 및 vue-cli를 기반으로 앱의 유닛 테스트를 생성하려고 합니다.

Vue 설명서, vue-loader, vue-cli 및 vue-template/webpack(기타!)을 읽었습니다.저는 제 컴포넌트의 유닛 테스트를 할 때 이것을 사용합니다.

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

vue-template/webpack 예제 및 vue 공식 예제처럼

이건 잘 작동하지만 프롤렘은 내 컴포넌트에 소품이 있을 때야나는 이것으로 합격하려고 한다.

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

유닛 테스트에서 이 소품을 얻으려고 하면 정의되지 않습니다.유닛 테스트에서 프로펠러를 컴포넌트에 전달하려면 어떻게 해야 합니까?

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

참조: https://vuejs.org/v2/api/ #props Data

내가 주로 하는 일, 그리고 내가 제안하는 것은 당신이 통과할 수 있는 도우미 기능을 만드는 것이다.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
  })
})

데이터 옵션에 대한 소품을 정의하고 vueInstance.propName에 액세스하여 소품의 가치를 얻을 수 있습니다.

언급URL : https://stackoverflow.com/questions/43583358/pass-props-to-component-in-unit-test