Vue-test-utils: Support async components

[matt-sanders]

Version

1.0.0-beta.25

Reproduction link

https://codesandbox.io/s/vql5z8zxv7

Steps to reproduce

Everything should run immediately within the codesandbox link. Note that sometimes the console doesn't update so you may have to open the chrome console to see the output.

What is expected?

You should be able to add async components without an error.

What is actually happening?

When you create an async component, you will get the following error:
TypeError: Cannot read property 'props' of undefined. This was previously working in 1.0.0-beta.20 but it seems that from 21 onwards it was broken, however 21 gives a slightly different error.

[eddyerburgh]

Root async components aren't yet supported, but we intend to add support.

[matt-sanders]

Hey @eddyerburgh thanks for the reply. Don't want to keep harping on about this, but just wanted to clarify that in the given example I'm not even mounting the component, just adding it to Vue is enough to cause the error.

Note that on line 21 I'm just mounting a basic component defined of line 15.

Another note is that this did previously work in version 20 ( which I might just roll back to for the time being ). Just curious as to why it worked in 20 but not since 21.

Thanks for the awesome library by the way, it's super helpful :)

[ryanjwilke]

Just checking in on this since it's been a year now. It sounds like this is still an outstanding issue, correct? I keep getting this error when running yarn test (using Jest):

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve async component: () => {
                /* istanbul ignore next */cov_rrcos4evi.f[5]++;
                cov_rrcos4evi.s[31]++;
                return Promise.resolve().then(() => {
                  /* istanbul ignore next */cov_rrcos4evi.f[6]++;
                  cov_rrcos4evi.s[32]++;
                  return _interopRequireWildcard(require(`@/assets/icon/x${this.size}/${this.name}.svg`));
                });
              }
      Reason: TypeError: Invalid value used as weak map key

This error is referencing this code inside the component:

  computed: {
    icon() {
      return () => import(`@/assets/icon/x${this.size}/${this.name}.svg`)
    },
  }