问题
Vue Test Utils has an API method called shallowMount() that:
...creates a
Wrapper
that contains the mounted and rendered Vue component, but with stubbed child components.
I've searched the Vue Test Utils documentation website but failed to find a good explanation of how these stubbed child components behave.
- What exactly are these stubbed child components?
- Which parts of the Vue component lifecycle do they go through?
- Is there a way to pre-program their behavior?
回答1:
What exactly are stubbed child components?
A stubbed child component is a replacement for a child component rendered by the component under test.
Imagine you have a ParentComponent
component that renders a ChildComponent
:
const ParentComponent = {
template: `
<div>
<button />
<child-component />
</div>
`,
components: {
ChildComponent
}
}
ChildComponent
renders a globally registered component and calls an injected instance method when it's mounted:
const ChildComponent = {
template: `<span><another-component /></span>`,
mounted() {
this.$injectedMethod()
}
}
If you use shallowMount
to mount the ParentComponent
, Vue Test Utils will render a stub of ChildComponent
in place of than the original ChildComponent
. The stub component does not render the ChildComponent
template, and it doesn't have the mounted
lifecycle method.
If you called html
on the ParentComponent
wrapper, you would see the following output:
const wrapper = shallowMount(ParentComponent)
wrapper.html() // <div><button /><child-component-stub /></div>
The stub looks a bit like this:
const Stub = {
props: originalComonent.props,
render(h) {
return h(tagName, this.$options._renderChildren)
}
}
Because the stub component is created with information from the original component, you can use the original component as a selector:
const wrapper = shallowMount(ParentComponent)
wrapper.find(ChildComponent).props()
Vue is unaware that it's rendering a stubbed component. Vue Test Utils sets it so that when Vue attempts to resolve the component, it will resolve with the stubbed component rather than the original.
Which parts of the Vue component lifecycle do they go through?
Stubs go through all parts of the Vue lifecycle.
Is there a way to pre-program their behavior?
Yes, you can create a custom stub and pass it using the stubs
mounting option:
const MyStub = {
template: '<div />',
methods: {
someMethod() {}
}
}
mount(TestComponent, {
stubs: {
'my-stub': MyStub
}
})
回答2:
You can find more information about stubbed components in this unofficial testing guide for Vue.
https://lmiller1990.github.io/vue-testing-handbook/#what-is-this-guide
In short:
A stub is simply a piece of code that stands in for another.
The Vue Test Utils information also has some information about shallow mount
:
https://vue-test-utils.vuejs.org/guides/#common-tips
The Vue Test Utils is lacking quite a bit of context though.
来源:https://stackoverflow.com/questions/52962489/what-are-stubbed-child-components-in-vue-test-utils