[question] How can we access slot props of scoped slots

[yakobe]

In VTU 1 it was possible to access the variables passed into slots using the scopedSlots mounting option (https://vue-test-utils.vuejs.org/api/options.html#scopedslots)

In VTU 2 this is no longer an option and scoped slots are combined with the slots mounting option. However it does not seem to be possible to access the the slot props.

listItem is passed in to the template via slots like this (as described in the docs):

<template>
  <ul>
    <template v-for="(listItem, index) in items">
      <slot :listItem="listItem"></slot>
    </template>
  </ul>
</template>

It used to be possible to do something like this:

  it('renders a list of modified items', () => {
    expect(mount(AppList, {
      props: {
        items: ['a', 'b', 'c']
      },
      slots: {
        default: '<li><span class="font-bold">{{ props.listItem }}</span></li>'
      }
    }).html()).toMatchSnapshot()
  })

Hewever, i dont seem to be able to access the listItem and the documentation does not cover how it should be done. Is it still possible and, if so, what is the syntax?

Many thanks

[afontcu]

Hi! Here you have some examples on how to destructure props from a scoped slot:

https://github.com/vuejs/vue-test-utils-next/blob/9d3c2a6526f3d8751d29b2f9112ad2a3332bbf52/tests/mountingOptions/slots.spec.ts#L124-L167

It is true, though, that we might want to feature an example on docs, possibly on slots API section!

[yakobe]

Thank you soooooooo much! That provides a ton of info that helped.

[lmiller1990]

@yakobe would you be able to make a PR adding some more info on this to the docs?

[yakobe]

Sure! I'll take a look and try to knock something together. It's just the md files in this repo huh? Is there a detailed procedure or just make a PR.

Short question:Those tests are great because they show multiple scenarios that help. I don't want to bloat the docs with too many examples (maybe 1 or 2). What do you think about adding links to test cases in the docs? They show real code examples and are automatically expanded with new scenarios as they arise. It might also help with contributions as more people would be aware of the tests scenarios and what they relate to.

[lmiller1990]

Just update the md files in this repo!

I think a few examples in the docs + some links to source code is fine.

[adi518]

How do we access it with a plain render function?

[lmiller1990]

Please share the component and test you are having problems with @adi518.

[adi518]

You can check it out here: https://github.com/adi518/vue-facebook-login/blob/next/packages/vue-facebook-login-component-next/tests/unit/FacebookLogin.spec.js#L142

Previously (Vue 2) I could do this: https://github.com/adi518/vue-facebook-login/blob/next/packages/vue-facebook-login-component/tests/unit/FacebookLogin.spec.js#L122

I described my use case here: #577

[lmiller1990]

Neat, I had no idea you could do that (even in VTU v1). Hidden feature - it's definitely not documented, as far as I know. It would be good to support that here, too.

I made an issue to track it: #578. I have no idea if/how to implement this off the top of my head.

[adi518]

I was too, surprised that hack actually worked, but it's not pretty, so I hope we can go back to the template literal when it's fixed. I did try all of the suggestions in #452 (comment), but it made the test throw ambiguous warnings, see below:

  console.warn ../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
    [Vue warn]: Property undefined was accessed during render but is not defined on instance. 
      at <Anonymous key=0 idle=true working=true  ... > 
      at <FacebookLoginButton scope= {
      idle: true,
      working: true,
      hasError: true,
      connected: true,
      disconnected: true
    } ref="VTU_COMPONENT" > 
      at <VTUROOT>

[lmiller1990]

Oh - I thought you wanted to use a render function. Do we still have a bug with template literals?

[adi518]

Yes, unless I write them the way it is now, I'm getting the warning above, although the snapshot is fine.

[lmiller1990]

Ok. Maybe related: #549

If you'd like to open a new issue with your exact reproduction, that's the best way to ensure this doesn't get forgotten - since we are discussing in a closed issue, it's easy for this to get swept under the rug.