unit-testing - Vue Test Utils 中的“存根子组件”是什么？

Question

Vue Test Utils有一个 API 方法，叫做shallowMount()：

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

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

score 28 · Accepted Answer

什么是存根子组件？

存根子组件是由被测组件呈现的子组件的替代品。

想象一下，你有一个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
  }
})

score 3 · Accepted Answer

你可以在这个非官方的 Vue 测试指南中找到关于存根组件的更多信息。

简而言之：

存根只是代表另一个的一段代码。

Vue Test Utils 信息也有一些关于shallow mount：

不过，Vue 测试实用程序缺乏相当多的上下文。

2 回答 2