Can not get lazy-loaded / async component

[ninofiliu]

Subject of the issue

.getComponent fails to get a component when it is lazy loaded

Steps to reproduce

Let A and B be two components

A.vue

<template>
  <div><B/></div>
</template>

<script>
import B from './B.vue';

export default {
  components: {
    B,
  },
};
</script>

B.vue

<template>
  <div>Hello from B</div>
</template>

This rightfully works

import { shallowMount } from '@vue/test-utils';
import A from './A.vue';
import B from './B.vue';

const wrapper = shallowMount(A);
wrapper.getComponent(B);

but when changing A to import B asynchronously, it does not anymore

A.vue

<template>
  <div><B/></div>
</template>

<script>
export default {
  components: {
    B: () => import('./B.vue'),
  },
};
</script>

I made a reproducible repo
https://github.com/ninofiliu/vue-test-bug

Expected behaviour

Gets the component

Actual behaviour

Fails with

Unable to get [object Object] within: <div>
  <!---->
</div>

Possible Solution

• Adding a await wrapper.vm.$nextTick() does not help
• Stubbing B fixes it, but I don't think it should be necessary

  const wrapper = shallowMount(A, { stubs: { B }});

[ninofiliu]

Used the same solution as in #1279 and it works as expected

https://github.com/ninofiliu/vue-test-bug/commit/b852816f575da8734e0c20b24046c656c41d11da

babel.config.json

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ],
  "plugins": ["dynamic-import-node"]
}

Thanks @hachichaud for pointing me in this direction!

I do think this workaround belongs in the documentation, though

[ebisbe]

@lmiller1990 Should we update the docs with any information?