Vue Test Utils имеет метод API под названием shallowMount(), что:

... создает Wrapper, который содержит смонтированный и визуализированный компонент Vue, но с заглушенными дочерними компонентами.

Я искал на сайте документации Vue Test Utils, но не смог найти хорошего объяснения того, как ведут себя эти заглушенные дочерние компоненты.

  1. Что именно представляют собой эти заглушенные дочерние компоненты?
  2. Через какие части жизненного цикла компонентов Vue они проходят?
  3. Есть ли способ заранее запрограммировать их поведение?
10
urig 24 Окт 2018 в 09:43

2 ответа

Лучший ответ

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

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

Представьте, что у вас есть компонент 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
  }
})
17
Edd 24 Ноя 2018 в 22:16

Вы можете найти дополнительную информацию о заглушенных компонентах в этом неофициальном руководстве по тестированию Vue.

https://lmiller1990.github.io/vue-testing-handbook/#what-is-this-guide

Короче говоря:

Заглушка - это просто фрагмент кода, который заменяет другой.

Информация Vue Test Utils также содержит некоторую информацию о shallow mount:

https://vue-test-utils.vuejs.org/guides/#common-tips

Однако Vue Test Utils не хватает контекста.

2
Stephan-v 24 Окт 2018 в 08:13
52962489