javascript - 如何在VueJS单元测试中触发子组件的点击事件？

Question

我有以下 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>

Answer 1

看起来factory()正在使用shallowMount ，它会 stub 其子组件。切换至mount确保 YearBtn 实际呈现。