我正在开发一个用 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。