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