Vue + Vuetify - test:unit 看不到 v-alert 消息值答案

【问题标题】：Vue + Vuetify - test:unit cannot see the v-alert message valueVue + Vuetify - test:unit 看不到 v-alert 消息值
【发布时间】：2018-11-13 12:30:02
【问题描述】：

在我的组件模板中，我有一个 v-alert vuetify 子组件

        <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 测试/单元/ContactForm.spec.js:383 无效的表单警报：取消

应该显示警报，并在 html 输出中显示类型集和消息值......

我不知道我的测试哪里错了？任何帮助表示赞赏

【问题讨论】：

标签： unit-testing vue.js vuetify.js

【解决方案1】：

已解决..

这是处理异步/等待功能的问题......在我的组件中

submitForm: async function() {
  ....

所以我在测试中使用了flush-promises

 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>

【讨论】：