Open
Description
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>
`;