v-slot not rendering along side default slot.

[rikbrowning]

Subject of the issue

I recently switched a project from the old slot syntax to the new v-slot syntax and my snapshot started failing. Some of the slots are not getting rendered at all.

Steps to reproduce

I have a simplified example that showcases the issue.

My component is as follows:

<template>
  <FakeComponent>
    <template v-slot:test>
      <TestComponent :msg="msg">
        <div>
          default slot of test component
        </div>
      </TestComponent>
    </template>
    <div>
      default slot of fake component
    </div>
  </FakeComponent>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

It is populating the test and default slot FakeComponent. According to the vue2 docs you can but do not have to specify the default slot in a template. My test is as follows:

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg },
    });
    expect(wrapper).toMatchSnapshot();
  });
});

Expected behaviour

I would expect the test slot to be rendered in the snap shot as it is with the old syntax.

exports[`HelloWorld.vue renders props.msg when passed 1`] = `
<fakecomponent>
  <testcomponent slot="test" msg="new message">
    <div>
      default slot of test component
    </div>
  </testcomponent>
  <div>
    default slot of fake component
  </div>
</fakecomponent>
`;

NOTE: to get the result above I simply changed the component to this:

<template>
  <FakeComponent>
    <TestComponent :msg="msg" slot="test">
      <div>
        default slot of test component
      </div>
    </TestComponent>
    <div>
      default slot of fake component
    </div>
  </FakeComponent>
</template>

Actual behaviour

exports[`HelloWorld.vue renders props.msg when passed 1`] = `
<fakecomponent>
  <div>
    default slot of fake component
  </div>
</fakecomponent>
`;

[standbyoneself]

It's little hard to understand. I really couldn't see <slot name="test" />. Please reproduce all the used components: HelloWorld, FakeComponent, TestComponent or it would be better to create a repository

[rikbrowning]

https://github.com/rikbrowning/test-utils-slot-bug

In this repository both snapshots should be the same. The only thing that is different is the slot syntax which is causing a break in snapshots.

[standbyoneself]

@rikbrowning,

Check out my PR

What actually happened?

<FakeComponent /> has a default slot and in the <Working /> are passed this content into the slot:

    <TestComponent :msg="msg" slot="test">
      <div>
        default slot of test component
      </div>
    </TestComponent>
    <div>
      default slot of fake component
    </div>

In the <Broken /> you are close