Vue + Vuetify - тест: устройство не может видеть значение сообщения v-alert

Question

В моем компонентном шаблоне у меня есть подкомпонент v -tify v-alert

        <v-alert dismissible @input="closeAlert()" @type="msgTypeContactForm" v-model="msgStatusContactForm">{{ msgValueContactForm }}</v-alert>

, использующий следующие данные

  data() {
    return {
      ...
      msgStatusContactForm: false,
      msgTypeContactForm: "",
      msgValueContactForm: ""
    };
  },

при отправке формы, когда возникает ошибка,Я установил эти данные

  catch (err) {
       this.msgTypeContactForm = "error";
       this.msgValueContactForm = this.$i18n.t("lang.views.home.contactForm.post_error");
       this.msgStatusContactForm = true;

Это работает нормально, предупреждение правильно отображается с правильными типом и значением ..

Однако в модульном тесте компонента свойства и значение предупрежденияне обновляется в шаблоне

       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 ПРЕДУПРЕЖДЕНИЕ О НЕПРАВИЛЬНОЙ ФОРМЕ: отмена

должно отображаться предупреждение, заданный тип и сообщениезначение, присутствующее в выводе html ....

Я не знаю, где я ошибаюсь в своем тесте?любая помощь приветствуется

Answer 1

решено ..

Это вопрос обработки асинхронной / ожидающей функции ... в моем компоненте

submitForm: async function() {
  ....

Поэтому я использую обещания сброса в моем тесте

 yarn add -D flush-promises

затем

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

Тогда я вижу обновленный DOM

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