获取动态子组件的包装器时出错

Question

我正试图为VueJS 2组件编写一个单元测试，该组件具有随状态变化而变化的动态组件。

<template>
<div>
<component ref="dynamicComponent" id="dynamicComponent" :is="someDynamicType" @custom-event="handleCustomEvent">
</component>
</div>
</template>

我试图测试的是，父组件是否正确地处理了来自子动态组件的自定义事件。然而，我遇到的问题是，我似乎无法获得对子动态组件的引用。

我试过

await wrapper.findComponent('#dynamicComponent').vm.$emit("custom-event", {});

和

await wrapper.find({ref: 'dynamicComponent'}).vm.$emit("custom-event", {});

我还尝试使用已知类型的动态组件

await wrapper.findComponent(KnownSubType).vm.$emit("custom-event", {});

但在每种情况下，我都会得到以下错误

TypeError: Cannot read properties of undefined (reading '$emit')

有没有其他方法可以获取组件，以便我可以发出自定义事件，或者有没有其他方式可以触发事件来测试我的父组件？

Answer 1

我在使用动态组件编写测试时遇到了类似的问题。为了确保在测试中操作子组件之前加载它，我必须刷新promise。这可以像下面的回答一样手动编写：https://stackoverflow.com/a/65665052/11015616

或

可以使用CCD_ 1npm库。

const wrapper = mount(SomeComponent, {options});
await flushPromises();
// manipulate child component