Как вызвать событие нажатия на дочерний компонент в модульном тесте 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);
});

К сожалению, вышеупомянутый тест не проходит, потому что щелчок событие в компоненте year-btn не может быть вызвано Vue Test Utils. Я знаю это, потому что, если я заменю свой шаблон следующим кодом, тест пройден.

<template>
    <div>
        <div>
            <button @click="incrementYear"
                ref="increment-btn"></button>
        </div>
    </div>
</template>

Мой вопрос заключается в том, как вызвать событие «click» для дочернего компонента (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");