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

Question

[philphil]

Имеется проект (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.

Может кто подсказать где я ошибся?

Answer 1

[profesor08]

Failed to resolve component: el-input
Намек на то, что кто-то не подключил свою библиотеку компонентов.

Comments

[philphil]

Подключена в файле main.js. Или её надо подключать и в каждом файле с тестом?

[profesor08]

philphil, что-то мне подсказывает, что main.js в тестах не участвует и для каждого теста создается свой инстанс vue.