Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
tom751 opened this issue Apr 3, 2024 · 1 comment · Fixed by #2397
Labels
bug Something isn't working

Comments

@tom751
Copy link

tom751 commented Apr 3, 2024

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

@tom751 tom751 added the bug Something isn't working label Apr 3, 2024
cexbrayat added a commit to cexbrayat/vue-test-utils-next that referenced this issue Apr 4, 2024
Fixes vuejs#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` `renderStubDefaultSlot`.
cexbrayat added a commit to cexbrayat/vue-test-utils-next that referenced this issue Apr 4, 2024
Fixes vuejs#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` `renderStubDefaultSlot`.
@cexbrayat
Copy link
Member

Hi @tom751

Thanks for the repro.
I suppose that we could call the default slot with an empty object by default to avoid the error. I'll open a PR.

cexbrayat added a commit to cexbrayat/vue-test-utils-next that referenced this issue Apr 4, 2024
Fixes vuejs#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`.
cexbrayat added a commit to cexbrayat/vue-test-utils-next that referenced this issue Apr 4, 2024
Fixes vuejs#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`.
cexbrayat added a commit to cexbrayat/vue-test-utils-next that referenced this issue Apr 5, 2024
Fixes vuejs#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`.
cexbrayat added a commit that referenced this issue Apr 5, 2024
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`.
nazarepiedady pushed a commit to nazarepiedady/vue-test-utils-v2 that referenced this issue Jul 18, 2024
Fixes vuejs#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`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants