我有以下 Vue 组件:
<template>
<div>
<div>
<year-btn @click="incrementYear"
ref="increment-btn"/>
</div>
</div>
</template>
<script>
import yearBtn from "@/components/formInputs/yearBtn.vue";
export default {
components: {
"year-btn": yearBtn,
},
data() {
return {
monthAndYear: {
year: 2000,
},
};
},
methods: {
incrementYear() {
this.monthAndYear.year++;
},
},
};
</script>
我有以下 Vue 单元测试。
it('test', async () => {
wrapper = factory();
wrapper.setData({
monthAndYear: {
year: 2020,
},
});
wrapper.find({ ref: "increment-btn" }).trigger("click");
await wrapper.vm.$nextTick();
result = wrapper.vm.monthAndYear.year;
expect(result).toEqual(2021);
});
不幸的是,上面的测试失败了,因为 Vue Test Utils 未能触发 'year-btn' 组件上的点击事件。我知道这一点是因为,如果我用以下代码替换我的模板,测试就会通过。
<template>
<div>
<div>
<button @click="incrementYear"
ref="increment-btn"></button>
</div>
</div>
</template>
我的问题是,如何在我的组件正在使用的子组件 (year-btn) 上触发“点击”事件?
下面是year-btn组件的样子:
<template>
<button @click="$emit('click')">
Click me
</button>
</template>
最佳答案
看起来factory()
正在使用shallowMount
,它会 stub 其子组件。切换至mount
确保 YearBtn
实际呈现。
关于javascript - 如何在VueJS单元测试中触发子组件的点击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60596010/