Vue-test-utils: Passing text to default slots

[WebDevLuke]

Hey all, so I have a very simple component with a default slot, like so:

<template>
    <button>
        <slot></slot>
    </button>
</template>

<script>
export default {
    name: 'app-button'
}
</script>

And would use like so:

<app-button>My Button</app-button>

How can I test that the My Button text passed to the component's default slot is rendering correctly?

I have the below unit test currently, which is working only because I've wrapped the My Button testing text in a span element, as otherwise I'm getting a Component template requires a root element, rather than just text. error.

import { mount } from 'vue-test-utils'
import appButton from '@/components/app-button/app-button'

describe('app-button.vue', () => {
    it('values passed to slots should render correctly', () => {
        const wrapper = mount(appButton, {
            slots: {
                default: '<span>My Button</span>'
            }
        })
        expect(wrapper.find('span').text()).toBe('My Button')
    })
})

How would I modify this so I can simply just test that <app-button>My Button</app-button> works, without having to wrap My Button string in a span? I apologize if this seems a stupid question, but I've read the docs and can't quite find a way to cover this very simple case. Thanks.

[eddyerburgh]

There actually isn't a way to do this right now. Perhaps we should think about adding it to the slots API. What do people think?

[WebDevLuke]

In that case, I look forward to seeing this implemented. Passing text to slots is quite a common use case, especially with simple, dumb components. 😃

[eddyerburgh]

This has been added and will be released in the next beta version 🙂

[eddyerburgh]

Released in 1.0.0-beta.7 🙌

[eddyerburgh]

we need to add this to docs

[38elements]

I will add document about this within 3 days.