vue-test-utils: v-slot not rendering along side default slot.
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>
`;
About this issue
- Original URL
- State: open
- Created 3 years ago
- Comments: 24 (9 by maintainers)
Commits related to this issue
- Repro for https://github.com/vuejs/vue-test-utils/issues/1868 — committed to rikbrowning/test-utils-slot-bug by deleted user 3 years ago
- Fix #1868, slots now work inside a div — committed to rikbrowning/vue-test-utils by deleted user 3 years ago
@lmiller1990
So I tried to quick route & just added the changes in the PR to our project’s
node_modulesdirectly. 😅 It doesn’t however solve my problem. 😓The first issue is
this.$options._renderChildrenis populated here so I never even get insidegetScopedSlotRenderFunctions.And then secondly, even when removing this condition for testing, the proposed change doesn’t work.
I checked out the proposed PR to see if I could make the tests fail & I can! 😄
By adding a default slot & some content, the named slot no longer renders. So the test for
.new-exampleexisting in the DOM fails.However, explicitly setting a default slot by name, correctly passes all slots (which is what I had seen above ☝️ ). So the tests do fail, but they fail for the reason I’d expect.
You can see my fork here with the failing test when passing a default slot: https://github.com/andrewbrennanfr/vue-test-utils/commit/3c30a68e587a1abd0a101b77248917014fc0036b
And also with the default slot being explicitly named, the test above ☝️ no longer fails: https://github.com/andrewbrennanfr/vue-test-utils/commit/f07f218c4ffe2defe07800e985fa6e09bcc7b5bb
Edit: I’ve played around with the tests & it looks like we aren’t well handling the default slot case when not explicitly named as
#default. And for me it’s thethis.$options._renderChildren ||.I think the proposed fix works to make named slots render correctly. But when paired with default slots, they are still omitted.
Any news on this issue?
I’ve started removing all the old deprecated slot syntax from our app & a bunch of tests are failing.
Some tests kind of work, if you explicitly set a
defaultslot. But this doesn’t solve every case & in reality, I’d like to keep all our tests as they are.The most simple example I have is:
What I receive:
What I expect:
I am also not able to
findany of the elements in the slots either so it is not simply snapshot related.