Testing date picker popover with vue test utils

[s3dse]

I cannot get the popover to open using vue-test-utils with jest. I picked up the transitionStub workaround from the vue-test-utils guide: https://v1.test-utils.vuejs.org/guides/#common-tips. However, I just receive the warning that multiple root nodes are not allowed.

    import { mount } from '@vue/test-utils'
    import VCalendar from 'v-calendar'
    import Vue from 'vue'
    Vue.use(VCalendar)

    const DatePick = {
        template: `
        <v-date-picker id="datepick" v-model="date">
        <template v-slot="{ inputValue, inputEvents }">
            <input
            id="datepick-input"
            class="bg-white border px-2 py-1 rounded"
            :value="inputValue"
            v-on="inputEvents"
            />
        </template>
        </v-date-picker>
        `,
        data() {
            return {
                date: new Date()
            }
        }
    }

    describe('DatePick', () => {

        const transitionStub = () => ({
            render: function (h) {
                return this.$options._renderChildren
            }
        })

        it('should render date picker', async () => {
            const wrapper = mount(DatePick, {
                stubs: {
                    transition: transitionStub()
                }
            })

            await wrapper.find('#datepick-input').trigger('hover')
            console.log(wrapper.html())
        })
    })

I picked up the transitionStub from the vue-test-utils guide. However, I just receive the warning that multiple root nodes are not allowed.

[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

    found in

    ---> <Transition>
           <Popover>
             <DatePicker>
               <Anonymous>
                 <Root>

Also wrapping the nodes into a div did not work. Did someone manage to get the popover to display in JSDOM?

[s3dse]

I had a typo in the wapper-div approach. It now looks like this:

const transitionStub = () => ({
    render: function(h) {
        return h('div', {}, this.$options._renderChildren)
    }
})

Now I get rid of the error 'Multiple root nodes returned...' but I still do not get the popover content via wrapper. The output of wrapper.html():

<span id="datepick"><input id="datepick-input" class="bg-white border px-2 py-1 rounded"><div data-v-39b30300="" class="vc-popover-content-wrapper"><div data-v-39b30300=""></div></div></span>

I would highly appreciate some hint on how to access the content of the popover.