Допустим, у меня есть компонент для получения асинхронных данных:
//renderless-component
export {
render() {
return this.$scopedSlots.default({
items: this.items
})
}
}
Теперь у меня есть другой компонент, который обернут в этот компонент.
//concrete-component
<template>
<renderless-component>
<div slot-scope="{items}">
//do some stuff with items
</div>
</renderless-component>
</template>
Теперь я хочубыть в состоянии выполнить утверждения на моем конкретном компоненте:
import { mount } from '@vue/test-utils'
import ConcreteComponent from './concrete-component'
let wrapper = mount(ConcreteComponent)
Когда я рендерим смонтированный компонент, я ожидаю, что будет отображаться содержимое слота, однако wrapper.html()
возвращает только строку <renderless-component/>
, вместо этогофактического HTML.
Как можно поступить об этом?