我正在开发一个用 Vue3 和 Ionic8 编写的应用程序，我编写了一个 Vue 组件，它基本上是一个自定义模式。现在我想对我的组件进行单元测试，但我无法访问内容...

我正在开发一个用 Vue3 和 Ionic8 编写的应用程序，我编写了一个 Vue 组件，它基本上是一个自定义模式。现在我想对我的组件进行单元测试，但我无法从测试代码中访问模式的内容。如何使用 vue-test-utils 和 vitest 来做到这一点（因为这是我们目前使用的）？

假设我在 MyCustomModal.vue ：

<script setup lang="ts">
const props = defineProps<{
  isOpen: boolean;
  userName: string;
}>();
</script>
<template>
  <ion-modal :is-open="isOpen" @did-dismiss="emit('didDismiss')">
    <div><h2>Your initial is {{ userName[0] }}</h2></div>
  </ion-modal>
</template>

现在我想测试组件是否呈现作为 prop 给出的名称的首字母，所以我想我可以编写如下规范：

describe("MyCustomModal", () => {
  it("should display the title with the name initial", () => {
    const wrapper = mount(MyCustomModal, {
      props: {
        isOpen: true,
        userName: "John Doe",
      },
    });

    expect(wrapper.element.isOpen).toBe(true);
    //Pass

    console.log(wrapper.text());
    //Prints an empty string
    console.log(wrapper.html());
    //Prints <ion-modal data-v-30836913=""></ion-modal>

    expect(wrapper.find("h2").text()).toContain("Your initial is J");
    //Error: Cannot call text on an empty DOMWrapper.
  });
});

我缺少什么来检查模态的内容，例如触发事件来测试行为（例如 wrapper.find("button").trigger("click") ）？

我发现了 这个类似的问题 ，但它针对的是 Angular 和非常老版本的 Ionic。