无法获得动态子组件的包装器

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

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

或

可以使用flush-promises npm库。

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