点击 vue-test-utils 中的 v-tab-item

Question

所以我有一个大致如下构建的 Vue 组件：

<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>

然后测试是这样的：

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')
})

它基本上是一个v-dialog里面的两个页面，我想要做的是切换页面并渲染第二个页面以查看已上传的图像，但我不知道如何单击v-tab-item让它改变。 它似乎甚至无法找到带有 data-testid 的按钮组件。

有没有人知道如何测试在 vue-test-utils 中单击 v-tabs-items ？ 我对测试 v-tab 中的内部功能不感兴趣，但我需要能够实际单击 data-testid 预览按钮以查看更改。

我必须找到并设置数据才能显示对话框，并且我正在模拟转换：

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

任何帮助是极大的赞赏！

Answer 1

所以这个问题之一是它没有渲染 v-tab-item，而它应该有，所以我没有尝试根据代码修复测试，而是将eager添加到 v-tab-item . 更多信息可以在这里找到。