P
P
philphil2021-06-22 13:30:14
Vue.js
philphil, 2021-06-22 13:30:14

How to assign a value to an input that is in a nested component during testing?

I have a project (vue 3) created with vue-cli. Element-plus is used as a ui framework. There is a HallCreate component with a form:

<el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="200px"
    size="large"
  >
    <el-form-item label="Название зала">
      <el-input
        v-model="form.name"
        @blur="v$.form.name.$touch"
        @input="validationErrors.name=[]"
        placeholder="Введите название зала"
        id="hallName"
      ></el-input>
....


There is a test:
import { mount } from "@vue/test-utils";
import HallCreate from "@/views/admin/hall/HallCreate.vue";

test("first test", async () => {
  const wrapper = mount(HallCreate);
  const hallNameInput = wrapper.findComponent("#hallName");
  await hallNameInput.setValue("testvalue");
  expect(hallNameInput.element.value).toBe("testvalue");
});


On startup I get an error:
console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
    [Vue warn]: Failed to resolve component: el-input 
      at <HallCreate> 
      at <HallCreate ref="VTU_COMPONENT" > 
      at <VTUROOT>

Error: Cannot call setValue on an empty VueWrapper.

Can anyone suggest where I went wrong?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question