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 with stubbed child components.

I've searched the Vue Test Utils documentation website but failed to find a good explanation of how these stubbed child components behave.

1. What exactly are these stubbed child components?
2. Which parts of the Vue component lifecycle do they go through?
3. Is there a way to pre-program their behavior?

Answer 1

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
  }
})