How to trigger click event on child component in VueJS unit test?

Question

I have the following Vue component:

<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>

And I have the following Vue unit test.

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

Unfortunately, the above test fails because the click event on the 'year-btn' component fails to be triggered by Vue Test Utils. I know this because, if I replace my template with the following code the test passes.

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

My question is, how do I trigger a "click" event on a child component (year-btn) that my component is using?

Below is what the year-btn component looks like:

<template>
    <button @click="$emit('click')">
        Click me
    </button>
</template>

@tony19 its at the bottom of my post - all it does is emit a click event when there is a click on the button. — ptk
– ptk, Commented Mar 9, 2020 at 9:13

tony19 · Accepted Answer · 2020-03-09 09:59:24Z

2

Seems likely that factory() is using shallowMount, which stubs its child components. Switch to mount to ensure the YearBtn is actually rendered.

answered Mar 9, 2020 at 9:59

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomasz Kostuch · Accepted Answer · 2020-03-09 07:27:57Z

2

If you add console.log to incrementYear you will see that ref holds component object not DOM element.

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

So try to change this:

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

to this:

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

answered Mar 9, 2020 at 7:27

Tomasz Kostuch

2491 silver badge14 bronze badges

3 Comments

ptk Over a year ago

Didn't work unfortunately. I get TypeError: Cannot read property 'trigger' of undefined when the test is run.

SRack Over a year ago

Great answer ^^ N.B. Vue is deprecating wrapper.find in favour of wrapper.findComponent if anyone else stumbles across this.

paddotk Over a year ago

@SRack Only for finding components specifically. wrapper.find is still applicable for finding DOM elements.

Collectives™ on Stack Overflow

How to trigger click event on child component in VueJS unit test?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related