@philphil

Как во время тестирования присвоить значение input который находится во вложенном компоненте?

Имеется проект (vue 3) созданный с помощью vue-cli. В качестве ui фреймворка используется element-plus. Имеется компонент HallCreate с формой:

<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.

Может кто подсказать где я ошибся?
  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08
Failed to resolve component: el-input
Намек на то, что кто-то не подключил свою библиотеку компонентов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы