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

Posted 2023-02-22

【中文标题】Vue 3单元测试无法到达元素

【英文标题】：Vue 3 Unit Test cannot get to element

【发布时间】：2021-12-08 05:36:46

【问题描述】：

我有一个使用 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)
)

但我无法继续参加考试。例如，我想测试“我的标题”是否显示在对话框中，但我无法处理该标题。我尝试过的任何方法都不起作用，例如以下测试：

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] 

在控制台中。谁能帮帮我？

【参考方案1】：

你可以使用

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

【讨论】：

这不是我想要访问的按钮 - 我对按钮没有任何问题 - 测试工作正常。这是我要访问的对话框的标题元素。

好的你可以试试wrapper.element.getAttribute('data-testid')

这也不起作用 - 我尝试使用 PrimeVue 对话框进行的所有操作似乎都为空

@RichardShergold 请您分享您要测试的标头的 html 吗？

我在原帖中做了。