feat: stubs mounting option

[lmiller1990]

We should support

mount: {
  stubs: {
    ComponentToStub: true // default stub
    Another: h => h('div') // custom stub
  }
}

[lmiller1990]

I spent a while on this. My first idea was:

Override h

Eg, something like

const originalH = h
const h = (...args) => {
  if (args[0] === ComponentToStub) {
    return originalH('stub')
  }
  return originalH(...args)
}

This isn't great - it will stub out the components for all tests, since we are overriding h for everyone.

Recursively loop components option

Eg if we have

const Bar = {
  components: {}
}

const Foo = {
  components: { Bar }
}

I had the idea to loop over each components field and override the component with some stub component. Same problem - we would be overriding the component for every test, not just the one in question, since we are mutating the original component module.

I guess we need some way to override the components only for a given Vue instance. I had a look at getCurrentInstance.appContext.components (see here for the source code in vue-next) but that seems to only contain global components registered with app.component.

[dobromir-hristov]

Could we use isCustomElement from this RFC to tell vue to just not render specific components? It would just leave it as is.

[lmiller1990]

Sorry, there has been a lot of progress since I updated this issue. We decided to add something to core, to let use override the h args. That way we skip rendering the component all together, and just render a stub, and don't need the hacks beta uses which should make the codebase and shallowMount in general more simple.

• @JessicaSachs made this PR: feat: add hook to transform h's arguments core#851
• Evan improved it to work on the createVNode level: vuejs/core@455a153

So the idea is before each mount/shallowMount we would call resetTransformHArgs then call transformHArgs before we render the component. For shallowMount we override all custom components, for stubs on the ones specified. We need some way to keep track of which components to stub for which test.

Jess has a WIP branch illustrating this here: https://github.com/vuejs/vue-test-utils-next/compare/debug/jess-shallow-mount?expand=1 I have not looked at this in detail yet.

[lmiller1990]

I am going to investigate this more with the following in mind:

• stub as an "empty" vue component
• when you find a stub, it returns a VueWrapper
• provide your own custom "stub"

This can be considered an "advanced" usage, mainly provided for backwards compat - ideally people should find and assert on dom elements and their markup.