Skip to content

Commit

Permalink
fix: renderStubDefaultSlot with scoped slots
Browse files Browse the repository at this point in the history
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`.
  • Loading branch information
cexbrayat committed Apr 4, 2024
1 parent d686ec4 commit 7f20878
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 2 deletions.
10 changes: 8 additions & 2 deletions src/vnodeTransformers/stubComponentsTransformer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,14 @@ export const createStub = ({
// Also having function text as attribute is useless and annoying so
// we replace it with "[Function]""
const stubProps = normalizeStubProps(props)

return h(tag, stubProps, renderStubDefaultSlot ? slots : undefined)
// if renderStubDefaultSlot is true, we render the default slot
if (renderStubDefaultSlot) {
// we explicitly call the default slot with an empty object
// so scope slots destructuring works
const slot = slots.default ? slots.default({}) : slots
return h(tag, stubProps, slot)
}
return h(tag, stubProps)
}
}
})
Expand Down
30 changes: 30 additions & 0 deletions tests/mountingOptions/global.components.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ describe('global.components', () => {
spy.mockRestore()
expect(wrapper.text()).toBe('Global')
})

it('render children with shallow and renderStubDefaultSlot', () => {
const Child = defineComponent({
template: '<div><p>child</p><slot /></div>'
Expand All @@ -97,4 +98,33 @@ describe('global.components', () => {
'</div>'
)
})

// https://github.com/vuejs/test-utils/issues/2395
it('render children with shallow and renderStubDefaultSlot with v-slot', () => {
const Child = defineComponent({
template: '<div><p>child</p><slot /></div>'
})
const Component = defineComponent({
template:
'<div><Child v-slot="{ count }"><div>hello{{ count }}there</div></Child></div>',
components: {
Child
}
})
const wrapper = mount(Component, {
shallow: true,
global: {
renderStubDefaultSlot: true
}
})

// count is undefined, but doesn't throw an error
expect(wrapper.html()).toEqual(
'<div>\n' +
' <child-stub>\n' +
' <div>hellothere</div>\n' +
' </child-stub>\n' +
'</div>'
)
})
})

0 comments on commit 7f20878

Please sign in to comment.