Vue + Vuetify - test:unit cannot see the v-alert message value - unit-testing

Question

In my component template I have a v-alert vuetify sub-component
<v-alert dismissible #input="closeAlert()" #type="msgTypeContactForm" v-model="msgStatusContactForm">{{ msgValueContactForm }}</v-alert>
using the following data
data() {
return {
...
msgStatusContactForm: false,
msgTypeContactForm: "",
msgValueContactForm: ""
};
},
on submitting the form, when an error is raised , I set these data
catch (err) {
this.msgTypeContactForm = "error";
this.msgValueContactForm = this.$i18n.t("lang.views.home.contactForm.post_error");
this.msgStatusContactForm = true;
This is running fine, the alert is correctly displayed with the correct type and value ..
However in the component unit test , the alert properties and value are not updated in the template
it("should not sendMessage - invalid form", async () => {
...
wrapper = mount(ContactForm, options);
const contactForm = wrapper.find("form");
...
const btnSubmit = wrapper.find("#btnSubmit");
btnSubmit.trigger("click");
await wrapper.vm.$nextTick();
// then
setTimeout(() => {
expect(wrapper.vm.validForm).toEqual(false);
expect(wrapper.vm.msgStatusContactForm).toEqual(true);
expect(wrapper.vm.msgTypeContactForm).toEqual("error");
}, 2000);
await wrapper.vm.$nextTick();
const alert = wrapper.find(".v-alert");
console.log("INVALID FORM ALERT: ", alert.html());
})
console.log tests/unit/ContactForm.spec.js:383
INVALID FORM ALERT: cancel
the alert should be displayed and the type set and message value present in the html output ....
I don't know where I am wrong in my test ? any help appreciated

Answer 1

SOLVED..
It's a matter of handling async/await function... in my component
submitForm: async function() {
....
So I use flush-promises in my test
yarn add -D flush-promises
then
import flushPromises from "flush-promises";
...
it("should not sendMessage - invalid form", async () => {
...
wrapper = mount(ContactForm, options);
...
// then
const btnSubmit = wrapper.find("#btnSubmit");
btnSubmit.trigger("click");
await flushPromises();
...
const alert = wrapper.find(".v-alert");
console.log("INVALID FORM ALERT: ", alert.html());
Then I can see the DOM updated
<div class="v-alert error" style=""><div>One or more fields are invalid. Please, review your input and submit</div><a class="v-alert__dismissible"><i aria-hidden="true" class="v-icon v-icon--right material-icons theme--light">cancel</i></a></div>