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”组件上的click事件。我知道这是因为，如果我用以下代码替换模板，则测试通过。

<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");

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

2 个答案: