Vue-test-utils: Cannot convert undefined or null to object

[caugner]

Version

1.0.0-beta.21

Reproduction link

https://gitlab/mygroup/myproject

Steps to reproduce

import { shallowMount } from "@vue/test-utils";
import { expect } from "chai";
import App from "@/App";
import router from "@/router";
import i18n from "@/i18n";

describe("App.vue", function() {
  let wrapper;

  beforeEach(() => {
    wrapper = shallowMount(App, {
      router,
      i18n
    });
  });

  //...

});

What is expected?

The tests should pass (like they did in 1.0.0-beta.20).

What is actually happening?

     TypeError: Cannot convert undefined or null to object
      at /builds/mygroup/myproject/dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:2447:1
      at Array.forEach (<anonymous>)
      at stubComponents (dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:2441:1)
      at createComponentStubsForAll (dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:2459:1)
      at shallowMount (dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:5522:1)
      at Context.<anonymous> (dist/webpack:/tests/unit/specs/App.spec.js:11:1)

[caugner]

Happens at this line.

[caugner]

I suppose my usage of closures to lazy-load components in my App.vue is the culprit:

<script>
export default {
  components: {
    bContainer: () => import("bootstrap-vue/es/components/layout/container"),
    bCollapse: () => import("bootstrap-vue/es/components/collapse/collapse"),
    bNavItem: () => import("bootstrap-vue/es/components/nav/nav-item"),
    bNavbar: () => import("bootstrap-vue/es/components/navbar/navbar"),
    bNavbarBrand: () =>
      import("bootstrap-vue/es/components/navbar/navbar-brand"),
    bNavbarNav: () => import("bootstrap-vue/es/components/navbar/navbar-nav"),
    bNavbarToggle: () =>
      import("bootstrap-vue/es/components/navbar/navbar-toggle"),
    bButtonGroup: () =>
      import("bootstrap-vue/es/components/button-group/button-group"),
    bButton: () => import("bootstrap-vue/es/components/button/button")
  }
  // ...
}

In this snippet from vue-test-utils.js (lines 2441 ff.), the cmp of type function does not have a property extendOptions and therefore the property _Ctor cannot be deleted:

  Object.keys(components).forEach(function (component) {
    var cmp = components[component];
    var componentOptions = typeof cmp === 'function'
      ? cmp.extendOptions
      : cmp;
    // Remove cached constructor
    delete componentOptions._Ctor;
    if (!componentOptions.name) {
      componentOptions.name = component;
    }
    stubbedComponents[component] = createBlankStub(componentOptions, component);
});

[eddyerburgh]

Thanks for the detailed bug report. I've added support for dynamic components which will be released in beta.22 this evening.

[caugner]

Thanks a lot, @eddyerburgh!