vue-test-utils find 没有返回，无法调用 setValue()答案

【问题标题】：vue-test-utils find did not return , cannot call setValue()vue-test-utils find 没有返回，无法调用 setValue()
【发布时间】：2021-09-29 21:17:20
【问题描述】：

我在模型中有一个文本框。我想要的是通过各种功能测试模型。目前发生的错误是[vue-test-utils]: find did not return #txtForget, cannot call setValue() on empty Wrapper

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

  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");
  });

【问题讨论】：

标签： unit-testing vuejs2 jestjs vue-test-utils

【解决方案1】：

我发现问题并解决如下

检查模型是否存在

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

然后触发按钮打开模型

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

  });

【讨论】：