0
我有一個Vue組件modal
其中有onClose
道具通過其父項。當點擊ok
按鈕時,將觸發onClose
方法。該代碼是如下:如何測試vue組件傳遞方法
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/[email protected]/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!