vue 单元测试触发器("点击")未触发

Question

我在我的vue项目中有一个测试，看起来像这样，

it('should close on dialog close click', async () => {
wrapper = mountWith({open :true});
wrapper.find('.c-dialog__close').trigger('click');
await Vue.nextTick();
console.log(wrapper.vm.open);
expect(wrapper.vm.open).toBe(false);
});

我期待wrapper.vm.open从true到false时，点击被触发，但它保持为假。在实际的UI中，点击工作，显示被设置为false，所以测试中一定有什么地方出错了?组件代码如下，

<template>
<!-- eslint-disable vue/no-v-html -->
<div class="c-dialog" :class="{'u-block': show}" @triggerOpen="handleOpen">
<div class="c-dialog__background" @click="handleClose">
<div class="c-dialog__wrapper u-mt-4 u-mb-1">
<div class="c-dialog__action u-flex">
<button class="c-dialog__close u-bg-denim-blue u-border-0 u-text-white" @click="handleClose()">Close</button>
</div>
<div class="c-dialog__main u-px-2 u-py-4 u-border u-bg-white">
<h4>{{ content.title }}</h4>
<div class="c-dialog__content u-mt-2" v-html="content.content" />
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
content: {
type: Object,
required: true
}
},
data() {
return {
show: false
}
},
methods: {
handleOpen() {
this.show = true;
},
handleClose() {
this.show = false;
}
}
});
</script>

Answer 1

您可能已经弄清楚了，在您的组件中，您有'show'，但在您的测试中，您希望'open'为真。