What are “stubbed child components” in Vue Test Utils?

Question

Vue Test Utils has an API method called shallowMount() that:

...creates a Wrapper that contains the mounted and rendered Vue component, but w

Answer 1

You can find more information about stubbed components in this unofficial testing guide for Vue.

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

In short:

A stub is simply a piece of code that stands in for another.

The Vue Test Utils information also has some information about shallow mount:

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

The Vue Test Utils is lacking quite a bit of context though.

Answer 2

What exactly are stubbed child components?

A stubbed child component is a replacement for a child component rendered by the component under test.

Imagine you have a ParentComponent component that renders a ChildComponent:

const ParentComponent = {
  template: `
    <div>
      <button />
      <child-component />
    </div>
  `,
  components: {
    ChildComponent
  }
}

ChildComponent renders a globally registered component and calls an injected instance method when it's mounted:

const ChildComponent = {
  template: `<span><another-component /></span>`,
  mounted() {
    this.$injectedMethod()
  }
}

If you use shallowMount to mount the ParentComponent, Vue Test Utils will render a stub of ChildComponent in place of than the original ChildComponent. The stub component does not render the ChildComponent template, and it doesn't have the mounted lifecycle method.

If you called html on the ParentComponent wrapper, you would see the following output:

const wrapper = shallowMount(ParentComponent)
wrapper.html() // <div><button /><child-component-stub /></div>

The stub looks a bit like this:

const Stub = {
  props: originalComonent.props,
  render(h) {
    return h(tagName, this.$options._renderChildren)
  }
}

Because the stub component is created with information from the original component, you can use the original component as a selector:

const wrapper = shallowMount(ParentComponent)
wrapper.find(ChildComponent).props()

Vue is unaware that it's rendering a stubbed component. Vue Test Utils sets it so that when Vue attempts to resolve the component, it will resolve with the stubbed component rather than the original.

Which parts of the Vue component lifecycle do they go through?

Stubs go through all parts of the Vue lifecycle.

Is there a way to pre-program their behavior?

Yes, you can create a custom stub and pass it using the stubs mounting option:

const MyStub = {
  template: '<div />',
  methods: {
    someMethod() {}
  }
}

mount(TestComponent, {
  stubs: {
    'my-stub': MyStub
  }
})