Vue-test-utils: Stubbing components

[eddyerburgh]

We have discussed adding an option to stub components to mount (shallow does this by default).

Do people agree with this API:

mount(Component, stub: {
  ComponentName: '<div />',
  AnotherComponentName: Component
})

[LinusBorg]

I assume the string variant would be a template string?

[eddyerburgh]

@LinusBorg yes

[eddyerburgh]

@LinusBorg I've just added the stub option for template strings.

This is the behavior for string templates:

const wrapper = mount(ComponentWithChildComponent, {
  stub: {
    ChildComponent: '<div class="stub"></div>'
  }
})
expect(wrapper.findAll('.stub').length).to.equal(1)
expect(wrapper.findAll(Component).length).to.equal(1)

I'm not sure how it should work for Components. Should it replace the original component completely, or should should it replace everything but the name?

const wrapper = mount(ComponentWithChildComponent, {
    stub: {
        ChildComponent: ComponentWithStyle,
    }
})
// expect(wrapper.findAll(ComponentWithStyle).length).to.equal(1)
// expect(wrapper.findAll(Component).length).to.equal(1) 
// Only one of these expect functions can pass - but which one 🤔

I'm starting to think that stub should only support template strings, to avoid this issue

[jackmellis]

I would suggest allowing for definition objects as well as templates. There are often times when I want to stub a child component, but still be able to accept props and emit events so as to emulate certain behaviours.

Presumably you'll be converting the templates into render functions anyway, so could you also set the name property of a stubbed component definition:

stub : { ChildComponent : { template : '...', props : ['foo'], /* etc */ } }

would result in an object signature like

{ name : 'ChildComponent', render : function(){}, props : ['foo'] }

[eddyerburgh]

Do you guys think that stub should also look for globally registered components matching the name, or should we leave tell users to register global stubs themselves?

The problem with the first option is that at the moment it will stub registered components for all future tests. If we decide on this behavior we should warn users this is happening.

[jackmellis]

I've come across the same issue myself, it's very hard to stub global components. The safest solution (aside from not stubbing them at all) is to go through all global components and register a local component with the same name on the test component.

[eddyerburgh]

So you think the stub option should not stub global components?

[jackmellis]

I think if you are testing a component that is rendering globally-registered components, it should stub them locally. But I don't think it's wise to alter the original components, as like you said, you could end up with leaks between tests.

[eddyerburgh]

Closed with 5b6892a2342aff2f6be7e3ce47da654742e9f10d

[MatteoGiacomo]

@eddyerburgh

just a quick question.
I can't find documentation on testing dynamic component.

What do you suggest ?

https://codesandbox.io/embed/vue-template-h1luw