如何在 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，它会存根其子组件。切换到mount 以确保实际呈现YearBtn。

Answer 2

如果将console.log 添加到incrementYear，您将看到 ref 包含组件对象而不是 DOM 元素。

    incrementYear() {
      this.monthAndYear.year++;
      console.log(this.$refs['increment-btn'])
    },

所以尝试改变这个：

wrapper.find({ ref: "increment-btn" }).trigger("click");

到这里：

wrapper.find({ ref: "increment-btn" }).$el.trigger("click");