vue-test-utils单元测试中点击v-tab-item切换标签的问题

现有组件代码 #

我有一个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弹窗内实现了两个标签页，测试目标是切换到第二个标签页，校验已上传的图片是否正常渲染，目前遇到两个异常：

• 测试代码无法定位到绑定了data-testid="preview-button"的v-tab-item元素
• 无法通过点击该元素触发标签切换

测试不需要覆盖v-tab组件的内部实现逻辑，仅需要触发标签切换后校验页面渲染结果即可。当前测试逻辑中必须先查找DialogLayout组件并设置其show数据为true才能让弹窗显示，已经提前写好了transition的stub逻辑：

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

可行解决方案 #

核心问题前置说明 #

v-tab-item是标签页的内容容器，不是触发切换的交互元素，默认非激活状态下会被隐藏，把data-testid绑定在这个元素上，即使能找到元素，点击它也不会触发标签切换，切换动作默认由对应的v-tab组件触发。另外Vuetify组件内部存在大量异步渲染逻辑，仅调用setData后不等待所有异步任务完成，DOM还没完成渲染，自然找不到目标元素。

方案1：修正元素绑定+等待渲染完成（适合需要模拟用户点击操作的场景） #

1. 将data-testid="preview-button"从v-tab-item挪到对应触发切换的v-tab元素上
2. 弹窗打开后调用flushPromises等待所有异步任务、组件渲染完成后再查找元素
   调整后的测试代码：

import { flushPromises } from '@vue/test-utils'

it('Image should be visible in preview', async () => {
    const component = createComponent()
    // 打开弹窗
    await component.findComponent(DialogLayout).setData({show: true})
    // 等待所有异步逻辑执行完成、DOM更新完毕
    await flushPromises()
    await component.vm.$nextTick()

    // 查找绑定了测试标记的tab触发按钮
    const previewBtn = component.find('[data-testid="preview-button"]')
    expect(previewBtn.exists()).toBe(true)
    // 触发点击后再次等待视图更新
    await previewBtn.trigger('click')
    await flushPromises()
    await component.vm.$nextTick()

    // 此处编写图片渲染校验逻辑即可
})

方案2：直接修改v-model值（适合不需要测试tab交互的场景，最符合当前需求） #

完全跳过tab的点击交互逻辑，直接修改v-tabs-items绑定的openTab值，直接切换到目标标签页，不需要关心Vuetify内部实现：

import { flushPromises } from '@vue/test-utils'

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

    // 直接触发v-model更新，切换到preview标签页
    // 如果openTab定义在当前被测组件上，可直接通过 component.vm.openTab = 'preview' 修改
    const tabsInstance = component.findComponent({name: 'VTabsItems'})
    tabsInstance.vm.$emit('input', 'preview')
    await flushPromises()
    await component.vm.$nextTick()

    // 直接校验预览区图片是否正常渲染
    expect(component.find('[data-testid="preview-button"] img').exists()).toBe(true)
})

方案3：Stub Vuetify内置组件避免内部逻辑干扰 #

如果Vuetify组件的内部属性透传逻辑导致data-testid找不到，可以在mount组件时全局stub掉tabs相关组件，保留属性透传和插槽渲染能力：

const wrapper = mount(YourTestComponent, {
    stubs: {
        'v-tabs-items': {
            template: '<div class="v-tabs-items-stub"><slot></slot></div>'
        },
        'v-tab-item': {
            // 透传所有自定义属性，包括data-testid
            template: '<div v-bind="$attrs"><slot></slot></div>'
        },
        transition: transitionStub
    }
})

stub后v-tab-item上的data-testid会直接绑定到渲染的普通div标签上，不会被组件内部逻辑吞掉，元素查找不会出现异常。

内容的提问来源于stack exchange，提问作者Anonymous User