Answer the question
In order to leave comments, you need to log in
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>
....
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");
});
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.
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question