假设我有一个获取异步数据的组件:
//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。
该如何处理?