Question

在我的组件模板中，我有一个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 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>

Vue + Vuetify-test：unit无法看到v-alert消息值

1 个答案: