Question

Vue Test Utils有一个称为shallowMount()的API方法，

...创建一个Wrapper，其中包含已安装和渲染的Vue组件，但具有残存的子组件。

我已经搜索了Vue Test Utils文档网站，但未能很好地解释这些存根子组件的行为。

这些存根子组件到底是什么？
它们经历了Vue组件生命周期的哪些部分？
是否可以对自己的行为进行预编程？

Answer 1

存根子组件到底是什么？

存根子组件代替了被测组件提供的子组件。

想象一下，您有一个呈现ParentComponent的{{1}}组件：

ChildComponent

const ParentComponent = { template: ` <div> <button /> <child-component /> </div> `, components: { ChildComponent } }呈现一个全局注册的组件，并在安装时调用注入的实例方法：

ChildComponent

如果您使用const ChildComponent = { template: `<span><another-component /></span>`, mounted() { this.$injectedMethod() } }来安装shallowMount，则Vue Test Utils将呈现ParentComponent的存根，而不是原始的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)
  }
}

Vue不知道它正在渲染存根组件。 Vue Test Utils对其进行了设置，以便在Vue尝试解析组件时，它将使用存根组件而不是原始组件进行解析。

他们经历了Vue组件生命周期的哪些部分？

存根遍历Vue生命周期的所有部分。

是否可以预编程他们的行为？

是的，您可以创建一个自定义存根并使用const wrapper = shallowMount(ParentComponent) wrapper.find(ChildComponent).props()安装选项传递它：

stubs

Answer 2

您可以在此非官方的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缺少很多上下文。

Vue测试实用程序中的“残存子组件”是什么？

2 个答案: