如何使用 Vuetify3 和 vitest 在 Vue3 中测试传送的对话框？

Question

我有以下问题：

我正在尝试使用

Vuetify 3

和

vitest

为以下

jsdom

对话框编写测试。

对话框组件

<template >
  <div class="text-center">
    <v-dialog v-model="dialog" width="auto">
      <template v-slot:activator="{props}">
        <v-btn id="open" to="#my-teleport" @click="dialog=true" color="primary" v-bind="props"> Open Dialog </v-btn>
      </template>
      <v-card>
        <v-card-text>Test Text</v-card-text>
        <v-card-actions>
          <v-btn id="close" color="primary" block @click="dialog = false">Close Dialog</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  data ({props}) {
    return {
      dialog: false,
    }
  },
}
</script>

测试：

describe('Dialog', async () => {
  beforeEach(() => {
    const el = document.createElement('div');
    el.id = 'my-teleport';
    document.body.appendChild(el);
  });

  afterEach(() => {
    document.body.outerHTML = ''
  })

  test('test open dialog', async () => {
    const wrapper = mount(Dialog, { global: {plugins: [vuetify]}});

    const openBtn = await wrapper.find('#open');
    await openBtn.trigger('click')

    expect(wrapper.vm.dialog).toBe(true)
    console.log(wrapper.html());

    const dialog= wrapper.getComponent('VDialog')
    dialog.getComponent('VBtn')
  });
});

运行测试时遇到的错误

错误：无法使用选择器 v-dialog 获取组件：

 <div class="text-center"><a class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" id="open" modelvalue="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
    <!----><span class="v-btn__content" data-no-activator=""> Open Dialog </span>
    <!---->
    <!---->
  </a>
  <!--teleport start-->
  <!--teleport end-->
</div>

你知道我该如何测试这个或者问题出在哪里吗？我尝试根据传送测试进行测试 文字但没用。

提前致谢！

Answer 1

您可以创建一个存根模拟组件或使用此官方指南来测试传送组件https://test-utils.vuejs.org/guide/advanced/teleport.html