Как тестировать динамичный компонент vue 3?

Question

[Crone01]

Как тестировать динамический компонент?

Есть кнопка, при нажатии на которую происходит изменение содержимого динамичного компонента (при нажатии туда попадает другой компонент).
Как его мокать? Как проверять что содержимое в <component/> изменилось?

<component :is="name">
name - меняется после каждого клика

Comments

[marsdenden]

я в 3 еще не зашел, на 2-м сижу. Таймером проверять наличие id элемента внутри этого компонента - не?

[Crone01]

вот так я замокал компоненты, которые меняются при клике

FirstTabComponent: defineComponent({
            name: 'FirstComponent',
            template: '<span class="first-tab"></span>',
        }),
SecondTabComponent: defineComponent({
            name: 'SecondComponent',
            template: '<span class="second-tab"></span>',
        }),

сценарий для теста который я ожидаю -
1) component.find('.first-tab') - нашелся элемент
2) //emit click btn - нажимается кнопка, динамичный компонент изменился
3) component.find('.first-tab') - его больше нет на странице,
4) component.find('.second-tab') - появился второй

Но все падает на первом же шаге, first-tab не находит

Answer 1

[Crone01]

Проблема была в том, что название мокнутого компонента отличалось от того что передавалось в name
было:

FirstTabComponent: defineComponent({
            name: 'FirstComponent',
            template: '<span class="first-tab"></span>',
        }),

должно быть:

FirstTabComponent: defineComponent({
            name: 'FirstTabComponent',
            template: '<span class="first-tab"></span>',
        }),