Vue.js vuetify test-utils test:unit failing - unit-testing

Question

My component template is correctly
<v-radio-group row :mandatory="false" v-model="gender" name="gender">
<v-radio :label="genderLabels.f" value="f" name="female"></v-radio>
<v-radio :label="genderLabels.m" value="m" name="male"></v-radio>
</v-radio-group>
genderLabels is correctly set upon mounted()
mounted() {
this.contactLang = this.language;
// eslint-disable-next-line
this.customDico = this.$validator.dictionary.container[this.language].custom;
this.genderLabels.f = this.customDico.gender.f;
this.genderLabels.m = this.customDico.gender.m;
}
there is no problem when executing yarn serve, one can see the radio label attributes..
but when I test it, they are not present...
ContactForm.spec.js
....
wrapper = mount(ContactForm, options);
console.log(wrapper.vm.genderLabels.f);
const radio = wrapper.find('[name="female"]');
console.log("radio: ", radio.html())
// then
console.log("radioLabels attributes: ", radio.attributes());
expect(radio.attributes("label")).toEqual("Mrs");
consolelog
wrapper = mount(ContactForm, options);
console.log(wrapper.vm.genderLabels.f);
const radio = wrapper.find('[name="female"]');
console.log("radio: ", radio.html())
// then
console.log("radioLabels attributes: ", radio.attributes());
expect(radio.attributes("label")).toEqual("Mrs");
● ContactForm.vue › uses the default form language
expect(received).toEqual(expected)
Expected value to equal:
"Mrs"
Received:
undefined
Difference:
Comparing two different types of values. Expected string but received undefined.
110 | // then
111 | console.log("radioLabels attributes: ", radio.attributes());
> 112 | expect(radio.attributes("label")).toEqual("Mrs");
| ^
113 | });
114 | /*
115 | it("change the form language when locale changed in store", async () => {
at Object.toEqual (tests/unit/ContactForm.spec.js:112:39)
console.log tests/unit/ContactForm.spec.js:107
Mrs
console.log tests/unit/ContactForm.spec.js:109
radio: <input aria-checked="false" role="radio" type="radio" value="f" name="female">
console.log tests/unit/ContactForm.spec.js:111
radioLabels attributes: { 'aria-checked': 'false',
role: 'radio',
type: 'radio',
value: 'f',
name: 'female' }
Test Suites: 1 failed, 1 total
where could I be wrong in my test code ?
thanks for feedback
==== UPDATE 1 ====
Using shallowMount , I gte the following in console.log(wrapper.html()); :
<vradiogroup-stub column="true" height="auto" name="gender" row="true" value="f">
<vradio-stub color="accent" onicon="$vuetify.icons.radioOn" officon="$vuetify.icons.radioOff" value="f" name="female"></vradio-stub>
<vradio-stub color="accent" onicon="$vuetify.icons.radioOn" officon="$vuetify.icons.radioOff" value="m" name="male"></vradio-stub>
</vradiogroup-stub>
using mount() , I get the follwoing in wrapper.html()
<input aria-checked="false" role="radio" type="radio" value="f" name="female">
<div role="radiogroup" class="v-input--radio-group__input">
<div class="v-radio theme--light">
<div class="v-input--selection-controls__input">
<input aria-checked="false" role="radio" type="radio" value="f" name="female">
<div class="v-input--selection-controls__ripple">
</div><i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i></div>
<label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: relative;"></label>
</div>
<div class="v-radio theme--light">
<div class="v-input--selection-controls__input">
<input aria-checked="false" role="radio" type="radio" value="m" name="male">
<div class="v-input--selection-controls__ripple">
</div>
<i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i>
</div>
<label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: relative;"></label>
</div>
</div>
It's strange ... no text in the label ...

Answer 1

SOLVED...
I do not understand yet why ... but I need to set my test as asynchronous :
then I can get the label attribute set to the correct value ...
it("uses the default form language", async () => {
...
wrapper = shallowMount(ContactForm, options);
await wrapper.vm.$nextTick();
const radioInput = wrapper.find('[name="female"]');
console.log(radioInput.html());
console.log tests/unit/ContactForm.spec.js:110
<vradio-stub color="accent" onicon="$vuetify.icons.radioOn"
officon="$vuetify.icons.radioOff"
value="f" name="female" label="Mrs"></vradio-stub>