new slot syntax template can't be accessed in shallowMount

[manonrichou]

Version

1.0.0-beta.29

Reproduction link

https://codesandbox.io/embed/vue-template-dr6i7?fontsize=14&previewwindow=tests

Steps to reproduce

Run the two tests in the link. The one pointing to the old syntax's slot will pass, the one pointing to the new slot's syntax won't.

What is expected?

Template with v-slot syntax can be accessed in the test when using shallow mount.

What is actually happening?

The test pointing to the template using the new slot syntax fails, whereas the one with the soon-to-be deprecated syntax passes.

[runarberg]

Are there any workarounds (other then using the deprecated syntax)?

[kspackman]

Very interested in this issue, so that we can upgrade our syntax and still be able to test our components.

[Stoom]

Are there any workarounds (other then using the deprecated syntax)?

What I've found is you need to provide your own stub for the component with slots. If you do that and add the named slots you care about then they will render in the shallowMount.

wrapper = shallowMount(Appbar, {
    store, router, localVue, vuetify, stubs: {
        VTooltip: '<v-tooltip-stub><slot></slot><slot name="activator"></slot></v-tooltip-stub>',
    },
});

[runarberg]

@Stoom That does not help if you need to test something that is inside a higher order component that uses scoped slots. E.g. in the following example, anything inside <SomeHigherOrderComponent> will be stubbed out:

<SomeHigherOrderComponent v-slot="scope">
  <p>
    We can use <code>scope</code> here,
    but <code>shallowMount</code> will stub this out.
    So we have to use <code>mount</code> to test it.
  </p>
</SomeHigherOrderComponent>

[runarberg]

Perhaps this is relevant, but vuese is experiencing a similar issue of not being able to access content inside slots that use the new v-slot syntax.

vuese/vuese#119

[Stoom]

@runarberg When I was testing VHover from vuetify I just did the following and it worked enough for me....

        wrapper = shallowMount(Settings, {
            propsData, localVue, vuetify, store, stubs: {
                VHover: `<slot></slot>`,
            },
        });

[runarberg]

@Stoom That doesn’t work for me. What I need to test is a child of the component using the v-slot:

<MyParent>
  <p>This is OK</p>

  <template v-slot="scope">
    <p>
      <strong>I need to test this.</strong>
      And I don’t know how to use <var>shallowMount</var>
      without it stubbing this out.
    </p>
  </template>
</MyParent>

Here <MyParent> has a slot scope on the default slot. I would need to stub the entire component to get it render, and then I might as well not write the unit test.

[lmiller1990]

Good slot support is something we will address before moving from beta to 1.0 - I'll try my best to fix this in the near future.

[lmiller1990]

Tried reproducing but failed to do so here: https://github.com/vuejs/vue-test-utils/pull/1383/files

I'll try pulling the reproduction repo.

[lmiller1990]

Progress! I got it working in #1383

Need to clean the code up and cover some edge cases (and support dynamic slots). Hopefully get this merged in soon!

[lmiller1990]

Merged in... this will go out in beta-31.