Что такое дочерние компоненты-заглушки?
Дочерний компонент-заглушка - это замена дочернего компонента, отображаемого тестируемым компонентом.
Представьте, что у вас естьParentComponent компонент, который отображает ChildComponent:
const ParentComponent = {
template: `
<div>
<button />
<child-component />
</div>
`,
components: {
ChildComponent
}
}
ChildComponent отображает глобально зарегистрированный компонент и вызывает метод внедренного экземпляра при его монтировании:
const ChildComponent = {
template: `<span><another-component /></span>`,
mounted() {
this.$injectedMethod()
}
}
Если вы используетеshallowMount для монтирования ParentComponent, Vue Test Utils отобразит заглушку ChildComponent вместо оригинальной ChildComponent.Компонент-заглушка не отображает шаблон ChildComponent и не имеет метода жизненного цикла mounted.
Если вы вызвали html в оболочке ParentComponent, вы увидите следующий вывод:
const wrapper = shallowMount(ParentComponent)
wrapper.html() // <div><button /><child-component-stub /></div>
Заглушка выглядит примерно так:
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: '<div />',
methods: {
someMethod() {}
}
}
mount(TestComponent, {
stubs: {
'my-stub': MyStub
}
})