Vue 3单元测试无法到达元素

Question

我有一个使用PrimeVue的Vue 3项目。在我的模板中我有一个PrimeVue对话框组件:

<template>
<div>
<Button data-testid="showButton" label="Show" @click="openDialog" />
<Dialog v-if="showDialog" data-testid="myDialog">
<template #header>
<h3 data-testid="dialogHeader">My Header</h3>
</template>
</Dialog>
</div>
</template>

我可以测试对话框最初是隐藏的，然后使用.exists()显示，例如

it('should not display a dialog initially', () => {
expect(wrapper.findComponent(Dialog).exists()).toBe(false)
})
it('should display a dialog when button is clicked', async() => {
const showButton = wrapper.find('[data-testid="showButton"]');
showButton.trigger('click');
await nextTick();
expect(wrapper.findComponent(Dialog).exists()).toBe(true)
})

但是我不能再继续测试了。我想测试一下"My Header"显示在对话框中，但我无法获得该标题的句柄。我没有尝试过任何工作，例如以下测试:

it('should display the correct heading', async() => {
const showButton = wrapper.find('[data-testid="showButton"]');
showButton.trigger('click');
await nextTick();
const dialogHeader = wrapper.find('[data-testid="dialogHeader"]');
console.log(dialogHeader);
})

返回

[Object: null prototype] {}

在控制台中。有人能帮我吗?

Answer 1

可以使用

const showButton = wrapper.find("button[data-testid='showButton']");