Fix for Dynamic imports not present

[segundaestrella]

Version

1.0.0-beta.29

Reproduction link

https://github.com/vuejs/vue-test-utils/blob/dev/CHANGELOG.md

Steps to reproduce

What is expected?

In the latest version is expected to be included the fix
#864

What is actually happening?

The fix #864 for dynamic imports seems lost.

On the repo changelog is listed in the release 1.0.0-beta.22 (2018-07-29)
https://github.com/vuejs/vue-test-utils/blob/dev/CHANGELOG.md

On the vue-test-utils package changelog is not listed
https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/CHANGELOG.md

And with the latest release a test with dynamic import still fails

      [Vue warn]: Failed to resolve async component: function vsMobileCalendarOverview() {
        return import('./MobileCalendarOverview.vue');
      }
      Reason: Error: Not supported
    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Failed to resolve async component: function vsMobileCalendarDaily() {
        return import('./MobileCalendarDaily.vue');
      }
      Reason: Error: Not supported

[eddyerburgh]

Hi I need a reproduction to help with this issue

[RyanHavoc]

Is there any progress on this issue? I've just encountered the same problem:

    [Vue warn]: Failed to resolve async component: () => {
          /* istanbul ignore next */
          cov_u5d2hd5dv.f[20]++;
          cov_u5d2hd5dv.s[24]++;
          return import('Icons/GithubCircle');
        }
    Reason: Error: Not supported

[RyanHavoc]

I found a solution. Needed to update my .bablerc to include:

  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }

[CodePlato3721]

Use mount + stubs instead of shallowMount

For example, Parent component lazy load Child component

<template>
  <div>
    Parent
    <Child />
  </div>
</template>

<script>

export default {
  components: {
    Child: () => import('./Child')
  }
}
</script>

Step 1. Change shallowMount into mount in unit tests

const wrapper = mount(Parent)

Step 2. Add stubs option to mount

const wrapper = mount(Parent, {
      stubs: {
        Child: true
    }
  })

The child component will be mount as <child-stub></child-stub> like we are using shallowMount.

[sumerokr]

@alexxiyang hey, thanks for this tip above!
But it looks, like there is no chance to find such stub by component reference via findComponent method

I mean

import Child from 'some'/path';
...
wrapper.findComponent(Child); // will return an error ErrorWrapper.

The problem is gone, when Child imported as a regular (not async) component in Parent.

As workaround I use wrapper.find('child-stub'), but it feels bad.

[ebisbe]

#1564 (comment)