'Vue Unit Tests: How to trigger select event on a v-radio in Vue + Vuetify + Jest

I am new to Vue/Vuetify and I am trying to add some unit (with Jest) tests to my component.

In my UI, I have a radio button that when selected, displays a div.

The behavior is correct in a browser.

I need to simulate a click on that radio button:

<v-radio-group v-model="feedbackType">
    <v-radio value="value1" @change="changeType"></v-radio>
    <v-row v-if="value1Selected" class="ma-4"></v-row>
</v-radio-group>

Here is my test code:

const wrapper = mount(MyComponent, {
    localVue,
    vuetify,
    mocks: { /* ... */},
    stubs: [ 'vRadio', /* ... */ ]
});

const radio = wrapper.find('[value=value1]');
radio.element.selected = true;
await radio.trigger('change');
// await wrapper.vm.$nextTick() // This doesn't help

radio.html() after the trigger:

<vradio-stub value="value1"></vradio-stub>

and radio-group doesn't contain my v-row.

Does someone have any insight on how to test the v-radio click?

Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source