Блог

Главная - Вопросы по программированию - vue-test-utils find не вернулся , не может вызвать setValue()

vue-test-utils find не вернулся , не может вызвать setValue()

#unit-testing #vuejs2 #jestjs #vue-test-utils

Вопрос:

У меня есть текстовое поле внутри модели. что я хочу, так это протестировать модель с помощью различных функций. в данный момент ошибка заключается в том, что [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");
  });

Ответ №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);

  });
Метки: ,