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

Question

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

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

<component :is="name">

name - меняется после каждого клика

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

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

сценарий для теста который я ожидаю -

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

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

Answer 1

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

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

должно быть:

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

БЛОГ НА HUSL

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

Ответы (1 шт):