vue-test-utils find未返回，无法调用setValue()

Question

我在模型中有一个文本框。我想要的是通过各种函数来测试模型。此时出现的错误是[vue-test-utils]: find did not return #txtForget, cannot call setValue() on empty Wrapper

Login.vue有一个我用过的文本框/输入框->

    <v-row class="ma-0 pa-0  mt-5 MultiFormStyle ">
      <!--  EMAIL -->
      <v-col md="12" sm="12" cols="12" class="">
        <ValidationProvider
          rules="required|email"
          name="EMAIL ADDRESS"
          v-slot="{ errors }"
        >
          <v-text-field
            v-model="editedItem.email"
            :label="errors[0] ? errors[0] : 'EMAIL ADDRESS'"
            :error-messages="errors"
            dense
            hide-details=""
            id="txtForget"
          >
          </v-text-field>
        </ValidationProvider>
      </v-col>
    </v-row>
  </ValidationObserver>

Login.spec.js的测试如下所示

  test("RESET PASSWORD  test", async () => {
    let wrapper = mount(Login, {
      stubs: ["router-link", "router-view"],
      vuetify,
      router,
      localVue,
    });

    wrapper.vm.editedItem.email = "admin@gmail.com";
    let element_textbox = wrapper.find("#txtForget");
    await element_textbox.setValue("test@gmail.com");
    expect(wrapper.vm.editedItem.email).toBe("admin@gmail.com");
  });

Answer 1

我找到了这个问题，并解决了它，如下所示

检查模型是否存在

let ForgetModel = wrapper.find("#forgetModel");
expect(ForgetModel.exists()).toBe(true);

然后触发按钮打开模型

    let ForgetPasswordBtn = wrapper.find("button#forgotPasswordBtn");
    ForgetPasswordBtn.trigger("click");
    await wrapper.vm.$nextTick();

之后，找到input元素并在上面写一个文本

let element_email = wrapper.find("#txtForget");
await element_email.setValue("test@gmail.com");

最后检查写入的值是否绑定

expect(wrapper.vm.editedItem).toBe("test@gmail.com"); 

这是我从各种关于vuetify的文章中找到的正确方法。

完整的代码如下

  test("RESET PASSWORD  test", async () => {
    let wrapper = mount(Login, {
      stubs: ["router-link", "router-view"],
      vuetify,
      router,
      localVue,
    });
    let ForgetModel = wrapper.find("#forgetModel");
    let ForgetPasswordBtn = wrapper.find("button#forgotPasswordBtn");
    ForgetPasswordBtn.trigger("click");
    await wrapper.vm.$nextTick();
    let element_email = wrapper.find("#txtForget");
    await element_email.setValue("test@gmail.com");
    expect(ForgetModel.exists()).toBe(true);
    expect(wrapper.vm.editedItem).toBe(true);

  });