Skip to content

Bug: Scoped slots always undefined when shallow mounting and renderStubDefaultSlot is enabled #2395

Closed
@tom751

Description

@tom751

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions