Skip to content

Commit 8e499e7

Browse files
committed
fix: renderStubDefaultSlot with scoped slots
Fixes #2395 We now explicitely call the default slot with an empty object to ensure that `<ComponentWithSlot v-slot="{ count }">` won't throw when tested with `renderStubDefaultSlot`.
1 parent 1c3f00a commit 8e499e7

File tree

2 files changed

+37
-2
lines changed

2 files changed

+37
-2
lines changed

src/vnodeTransformers/stubComponentsTransformer.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,13 @@ export const createStub = ({
117117
// Also having function text as attribute is useless and annoying so
118118
// we replace it with "[Function]""
119119
const stubProps = normalizeStubProps(props)
120-
121-
return h(tag, stubProps, renderStubDefaultSlot ? slots : undefined)
120+
// if renderStubDefaultSlot is true, we render the default slot
121+
if (renderStubDefaultSlot && slots.default) {
122+
// we explicitly call the default slot with an empty object
123+
// so scope slots destructuring works
124+
return h(tag, stubProps, slots.default({}))
125+
}
126+
return h(tag, stubProps)
122127
}
123128
}
124129
})

tests/mountingOptions/global.components.spec.ts

+30
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ describe('global.components', () => {
7272
spy.mockRestore()
7373
expect(wrapper.text()).toBe('Global')
7474
})
75+
7576
it('render children with shallow and renderStubDefaultSlot', () => {
7677
const Child = defineComponent({
7778
template: '<div><p>child</p><slot /></div>'
@@ -97,4 +98,33 @@ describe('global.components', () => {
9798
'</div>'
9899
)
99100
})
101+
102+
// https://github.com/vuejs/test-utils/issues/2395
103+
it('render children with shallow and renderStubDefaultSlot with v-slot', () => {
104+
const Child = defineComponent({
105+
template: '<div><p>child</p><slot /></div>'
106+
})
107+
const Component = defineComponent({
108+
template:
109+
'<div><Child v-slot="{ count }"><div>hello{{ count }}there</div></Child></div>',
110+
components: {
111+
Child
112+
}
113+
})
114+
const wrapper = mount(Component, {
115+
shallow: true,
116+
global: {
117+
renderStubDefaultSlot: true
118+
}
119+
})
120+
121+
// count is undefined, but doesn't throw an error
122+
expect(wrapper.html()).toEqual(
123+
'<div>\n' +
124+
' <child-stub>\n' +
125+
' <div>hellothere</div>\n' +
126+
' </child-stub>\n' +
127+
'</div>'
128+
)
129+
})
100130
})

0 commit comments

Comments
 (0)