我有一个带按钮的 Vue 组件。单击按钮时,将调用一个方法。我正在使用 Jest 进行单元测试。我期望 vue-test-utils
中的 .trigger
方法在按钮上创建一个合成事件,但它什么也没做。
我尝试通过调用 wrapper.vm.addService()
然后使用 console.log(wrapper.emitted())
直接在包装器上调用方法,我确实可以看到一个事件已经被触发。所以我的问题是为什么 addServiceBtn.trigger('click')
不执行任何操作。
console.log(wrapper.emitted())
是一个空对象。测试结果失败,错误消息:Expected spy to have been called, but it was not called.
ServiceItem.vue
<template>
<v-flex xs2>
<v-card>
<v-card-text id="itemTitle">{{ item.title }}</v-card-text>
<v-card-actions>
<v-btn flat color="green" id="addServiceBtn" @click="this.addService">Add</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</template>
<script>
export default {
data: () => ({
title: ''
}),
props: {
item: Object
},
methods: {
addService: function (event) {
console.log('service item')
this.$emit('add-service')
}
}
}
</script>
tests.spec.js
import { shallowMount, mount } from '@vue/test-utils'
import ServiceItem from '@/components/ServiceItem.vue'
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
describe('ServiceItem.vue', () => {
it('emits add-service when Add button is clicked', () => {
const item = {
title: 'Service'
}
const wrapper = mount(ServiceItem, {
propsData: { item }
})
expect(wrapper.find('#addServiceBtn').exists()).toBe(true)
const addServiceBtn = wrapper.find('#addServiceBtn')
const spy = spyOn(wrapper.vm, 'addService')
console.log(wrapper.emitted())
addServiceBtn.trigger('click')
expect(wrapper.vm.addService).toBeCalled()
})
})
最佳答案
您的 HTML 代码中有一点错误。您将 @click
事件绑定(bind)到您的方法,而无需任何 this
。做到:
<v-btn flat color="green" id="addServiceBtn" @click="addService($event)">Add</v-btn>
关于javascript - vue-test-utils 在按钮上点击触发器不触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53449402/