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?

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

Solution 2

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.

Comments

[Stephan-v]

Perhaps this can you help out which on the very first result on the very first page when searching for vue stubbed components. lmiller1990.github.io/vue-testing-handbook/…

[urig]

Thanks. I'd also mention that the guide describes that in stubs "internal methods, such as makeApiCall, are replaced by dummy methods that don't do anything". Most importantly - any idea on how these internal methods can be pre-programmed with desired behavior when arranging the test?