作者：ha遗忘的密 | 来源：互联网 | 2022-12-01 15:31
1> Edd..：
顽固的子组件究竟是什么？
stubbed子组件是被测组件呈现的子组件的替代品.
想象一下,你有一个ParentComponent组件呈现ChildComponent:
const ParentCompOnent= {
template: `
`,
components: {
ChildComponent
}
}
ChildComponent 呈现全局注册的组件,并在安装时调用注入的实例方法:
const ChildCompOnent= {
template: ``,
mounted() {
this.$injectedMethod()
}
}
如果您使用shallowMount安装ParentComponent,Vue Test Utils将渲染一个ChildComponent替代原始的存根ChildComponent.存根组件不呈现ChildComponent模板,并且它没有mounted生命周期方法.
如果你调用html了ParentComponent包装器,你会看到以下输出:
const wrapper = shallowMount(ParentComponent)
wrapper.html() //
存根看起来有点像这样:
const Stub = {
props: originalComonent.props,
render(h) {
return h(tagName, this.$options._renderChildren)
}
}
由于存根组件是使用原始组件中的信息创建的,因此您可以将原始组件用作选择器:
const wrapper = shallowMount(ParentComponent)
wrapper.find(ChildComponent).props()
Vue没有意识到它正在渲染一个存根组件.Vue Test Utils设置它,以便当Vue尝试解析组件时,它将使用存根组件而不是原始组件解析.
他们经历了Vue组件生命周期的哪些部分？
存根遍历Vue生命周期的所有部分.
有没有办法预先编程他们的行为？
是的,您可以创建自定义存根并使用stubs安装选项传递它:
const MyStub = {
template: '',
methods: {
someMethod() {}
}
}
mount(TestComponent, {
stubs: {
'my-stub': MyStub
}
})
京公网安备 11010802041100号