So I have a Vue component that is built roughly like this:

<DialogLayout>
    <template #activator="slotData">
        <slot name="activator" v-bind="slotData"></slot>
    </template>
    <template #default="{ disabled }">
        <v-tabs-items v-model="openTab" transition="fade">
            <v-tab-item key="notPreview">
                <div></div>
            </v-tab-item>
            <v-tab-item key="preview" data-testid="preview-button">
                <h4>{{ title }}</h4>
                <Card :post="preview"
                ></Card>
            </v-tab-item>
        </v-tabs-items>
    </template>
</DialogLayout>

And then the test is this:

it('Image should be visible in preview', async () => {
    const component = createComponent()
    await component.findComponent(DialogLayout).setData({show: true})

    const previewBtn = component.find('[data-testid="preview-button"]')
    expect(previewBtn.exists())
    await previewBtn.trigger('click')
})

It's basically two pages inside a v-dialog, and what I want to do is switch the page and render the second page to see the image that has been uploaded, but I can't figure out how to click the v-tab-item for it to change. It doesn't seem to even be able to find the button component with the data-testid.

Does anyone have any idea on how to test clicking on a v-tabs-items in vue-test-utils? I'm not interested in testing the internal function in v-tab, but I need to be able to actually click the data-testid preview-button to see the change.

I have to find and setData for the dialog to even show, and I'm mocking the transition with:

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

Any help is greatly appreciated!

CodePudding user response：

So one of the problems with this was that it didn't render the v-tab-item, while it should have, so instead of trying to fix the test according to the code, i instead added eager to the v-tab-item. More information can be found here.