Что такое «заглушенные дочерние компоненты» в Vue Test Utils?

Что такое заглушенные дочерние компоненты?

Заглушенный дочерний компонент - это замена дочернего компонента, отображаемого тестируемым компонентом.

Представьте, что у вас есть компонент 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
  }
})