时间戳

首页 > 解决方案 > vue-test-utils find 没有返回，无法调用 setValue()

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

问题描述

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

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

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

标签： unit-testingvuejs2jestjsvue-test-utils

解决方案

我发现了问题并解决了如下

检查模型是否存在

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

  });

推荐阅读