vue 구성 요소 전달 방법을 테스트하는 방법

Question

Vue 구성 요소 modal에 부모에 의해 전달 된 onClose 소품이 있습니다. ok 단추를 클릭하면 onClose 메서드가 트리거됩니다.

Vue.component('modal', { 
 
    template: '#modal-template', 
 
    props: { 
 
    onClose: { 
 
     type: Function 
 
    } 
 
    }, 
 
    methods: { 
 
    ok() { 
 
     this.onClose(); 
 
    } 
 
    } 
 
}) 
 

 
// start app 
 
new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    close() { 
 
    \t alert('close') 
 
    } 
 
    } 
 
})

<script src="https://npmcdn.com/vue@1.0.26/dist/vue.min.js"></script> 
 

 
<script type="x/template" id="modal-template"> 
 
    <div class="modal-mask"> 
 
    <button @click='ok()'> OK </button> 
 
    </div> 
 
</script> 
 

 
<div id="app"> 
 
    <modal :on-close="close" ></modal> 
 
</div>

내가 modal 성분의 단위 테스트 close 방법에 spy 정의한다고 생각되므로 시험은 이하이어야한다 : 코드는 아래와 같다

let vm = new Vue({ 
    template: '<div><modal v-ref:test-component :on-close="close"></modal></div>', 
    methods: { 
    close: sinon.spy() 
    }, 
    components: { ConfirmModal } 
}).$mount() 
const modal = vm.$refs.testComponent 
modal.ok() 
expect(vm.close).have.been.called() 

오류로 인해 검사에 실패했습니다 : TypeError: [Function] is not a spy or a call to a spy!

Answer 1

단위 테스트에서 발췌 한 내용은 다음과 같습니다.

it('methods', function() { 
    var spy = jasmine.createSpy() 
    var vm = new Vue({ 
    el: el, 
    template: '<a v-on:click="test"></a>', 
    data: {a: 1}, 
    methods: { 
     test: spy 
    } 
    }) 
    var a = el.firstChild 
    trigger(a, 'click') 
    expect(spy.calls.count()).toBe(1) 
    vm.$destroy() 
    trigger(a, 'click') 
    expect(spy.calls.count()).toBe(1) 
})