Description
Describe the bug
When renderStubDefaultSlot
is enabled, if you shallowMount
a component that renders another component that has a scoped slot, then an error is thrown stating that the slot is undefined. This used to work on vue test utils v1, and is making my current Vue 2.7 > 3 migration quite difficult.
To Reproduce
TLDR Here's an example repo https://github.com/tom751/vtu-slot-issue - The HelloWorld.spec.ts
will fail
Have a component that renders a child component that has a scoped slot:
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<ComponentWithSlot v-slot="{ count }">
<h2>The count is {{ count }}</h2>
</ComponentWithSlot>
</div>
</template>
Render the component with shallowMount
and renderStubDefaultSlot
enabled
describe('HelloWorld', () => {
beforeAll(() => {
config.global.renderStubDefaultSlot = true
})
it('renders properly', () => {
const wrapper = shallowMount(HelloWorld, { props: { msg: 'Hello Vitest' } })
expect(wrapper.text()).toContain('Hello Vitest')
})
})
The following error is thrown after running the test:
FAIL src/components/__tests__/HelloWorld.spec.ts > HelloWorld > renders properly
TypeError: Cannot destructure property 'count' of 'undefined' as it is undefined.
❯ src/components/HelloWorld.vue:12:34
10| <div class="greetings">
11| <h1 class="green">{{ msg }}</h1>
12| <ComponentWithSlot v-slot="{ count }">
| ^
13| <h2>The count is {{ count }}</h2>
14| </ComponentWithSlot>
Expected behavior
An error shouldn't be thrown, the behaviour should be the same as it is in Vue 2 + vue test utils v1
Related information:
Additional context
This used to work in Vue 2.7 and vue test utils v1