vue-test-utils find did not return , cannot call setValue()

Question

I have a textbox inside a model. what I want is to test the model by various functions. at the moment what the error occurs is [vue-test-utils]: find did not return #txtForget, cannot call setValue() on empty Wrapper

Login.vue has a textbox / input box -> I have used 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 has a test as follows

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

    wrapper.vm.editedItem.email = "[email protected]";
    let element_textbox = wrapper.find("#txtForget");
    await element_textbox.setValue("[email protected]");
    expect(wrapper.vm.editedItem.email).toBe("[email protected]");
  });

Mohamed Raza · Accepted Answer · 2021-07-22 16:05:23Z

i found the issue and solved it as follows

checking if the model exist

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

then triging the button to open the model

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

after that find the input element and write a text on it

let element_email = wrapper.find("#txtForget");
await element_email.setValue("[email protected]");

finally checking the written value is bonded or not

expect(wrapper.vm.editedItem).toBe("[email protected]");

this is the proper method I found from various articles that works on vuetify.

complete code is below

  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("[email protected]");
    expect(ForgetModel.exists()).toBe(true);
    expect(wrapper.vm.editedItem).toBe(true);

  });

Collectives™ on Stack Overflow

vue-test-utils find did not return , cannot call setValue()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related