fix: stub globally registered components (#859)

Author: eddyerburgh

packages/create-instance/create-instance.js

@@ -6,6 +6,7 @@ import { addEventLogger } from './log-events'
 import { createComponentStubs } from 'shared/stub-components'
 import { throwError, warn, vueVersion } from 'shared/util'
 import { compileTemplate } from 'shared/compile-template'
+import { isRequiredComponent } from 'shared/validators'
 import extractInstanceOptions from './extract-instance-options'
 import createFunctionalComponent from './create-functional-component'
 import { componentNeedsCompiling, isPlainObject } from 'shared/validators'
@@ -64,26 +65,41 @@ export default function createInstance (
 
   addEventLogger(_Vue)
 
+  // Replace globally registered components with components extended
+  // from localVue. This makes sure the beforeMount mixins to add stubs
+  // is applied to globally registered components.
+  // Vue version must be 2.3 or greater, because of a bug resolving
+  // extended constructor options (https://github.com/vuejs/vue/issues/4976)
+  if (vueVersion > 2.2) {
+    for (const c in _Vue.options.components) {
+      if (!isRequiredComponent(c)) {
+        _Vue.component(c, _Vue.extend(_Vue.options.components[c]))
+      }
+    }
+  }
+
   const stubComponents = createComponentStubs(
-    // $FlowIgnore
     component.components,
     // $FlowIgnore
     options.stubs
   )
   if (options.stubs) {
     instanceOptions.components = {
       ...instanceOptions.components,
-      // $FlowIgnore
       ...stubComponents
     }
   }
+  function addStubComponentsMixin () {
+    Object.assign(
+      this.$options.components,
+      stubComponents
+    )
+  }
   _Vue.mixin({
-    created () {
-      Object.assign(
-        this.$options.components,
-        stubComponents
-      )
-    }
+    beforeMount: addStubComponentsMixin,
+    // beforeCreate is for components created in node, which
+    // never mount
+    beforeCreate: addStubComponentsMixin
   })
   Object.keys(componentOptions.components || {}).forEach(c => {
     if (

packages/shared/stub-components.js

@@ -11,7 +11,8 @@ import {
 import {
   componentNeedsCompiling,
   templateContainsComponent,
-  isVueComponent
+  isVueComponent,
+  isRequiredComponent
 } from './validators'
 import { compileTemplate } from './compile-template'
 
@@ -36,12 +37,6 @@ function resolveComponent (obj: Object, component: string): Object {
     {}
 }
 
-function isRequiredComponent (name): boolean {
-  return (
-    name === 'KeepAlive' || name === 'Transition' || name === 'TransitionGroup'
-  )
-}
-
 function getCoreProperties (componentOptions: Component): Object {
   return {
     attrs: componentOptions.attrs,

packages/shared/validators.js

@@ -89,3 +89,9 @@ export function templateContainsComponent (
 export function isPlainObject (obj: any): boolean {
   return Object.prototype.toString.call(obj) === '[object Object]'
 }
+
+export function isRequiredComponent (name: string): boolean {
+  return (
+    name === 'KeepAlive' || name === 'Transition' || name === 'TransitionGroup'
+  )
+}

packages/test-utils/src/find-vue-components.js

@@ -76,7 +76,7 @@ export function vmFunctionalCtorMatchesSelector (
 ): boolean {
   if (VUE_VERSION < 2.3) {
     throwError(
-      `find for functional components is not support in ` + `Vue < 2.3`
+      `find for functional components is not supported in ` + `Vue < 2.3`
     )
   }
 

test/specs/mounting-options/stubs.spec.js

@@ -5,7 +5,7 @@ import ComponentAsAClass from '~resources/components/component-as-a-class.vue'
 import { createLocalVue, config } from '~vue/test-utils'
 import { config as serverConfig } from '~vue/server-test-utils'
 import Vue from 'vue'
-import { describeWithMountingMethods } from '~resources/utils'
+import { describeWithMountingMethods, vueVersion } from '~resources/utils'
 import { itDoNotRunIf } from 'conditional-specs'
 
 describeWithMountingMethods('options.stub', mountingMethod => {
@@ -133,42 +133,70 @@ describeWithMountingMethods('options.stub', mountingMethod => {
   itDoNotRunIf(
     mountingMethod.name === 'shallowMount',
     'stubs nested components', () => {
-      const GrandchildComponent = {
+      const GrandChildComponent = {
         template: '<span />'
       }
       const ChildComponent = {
-        template: '<grandchild-component />',
-        components: { GrandchildComponent }
+        template: '<grand-child-component />',
+        components: { GrandChildComponent }
       }
       const TestComponent = {
         template: '<child-component />',
         components: { ChildComponent }
       }
       const wrapper = mountingMethod(TestComponent, {
-        stubs: ['grandchild-component']
+        stubs: ['grand-child-component']
       })
       const HTML = mountingMethod.name === 'renderToString'
         ? wrapper
         : wrapper.html()
       expect(HTML).not.to.contain('<span>')
     })
 
+  itDoNotRunIf(
+    mountingMethod.name === 'shallowMount' || vueVersion < 2.3,
+    'stubs nested components registered globally', () => {
+      const GrandChildComponent = {
+        render: h => h('span', ['hello'])
+      }
+      const ChildComponent = {
+        render: h => h('grand-child-component')
+      }
+      const TestComponent = {
+        render: h => h('child-component')
+      }
+      Vue.component('child-component', ChildComponent)
+      Vue.component('grand-child-component', GrandChildComponent)
+
+      const wrapper = mountingMethod(TestComponent, {
+        stubs: {
+          'grand-child-component': true
+        }
+      })
+      const HTML = mountingMethod.name === 'renderToString'
+        ? wrapper
+        : wrapper.html()
+      expect(HTML).not.to.contain('<span>')
+      delete Vue.options.components['child-component']
+      delete Vue.options.components['grand-child-component']
+    })
+
   itDoNotRunIf(
     mountingMethod.name === 'shallowMount',
     'stubs nested components on extended components', () => {
-      const GrandchildComponent = {
+      const GrandChildComponent = {
         template: '<span />'
       }
       const ChildComponent = {
-        template: '<grandchild-component />',
-        components: { GrandchildComponent }
+        template: '<grand-child-component />',
+        components: { GrandChildComponent }
       }
       const TestComponent = {
         template: '<div><child-component /></div>',
         components: { ChildComponent }
       }
       const wrapper = mountingMethod(Vue.extend(TestComponent), {
-        stubs: ['grandchild-component']
+        stubs: ['grand-child-component']
       })
       const HTML = mountingMethod.name === 'renderToString'
         ? wrapper

test/specs/wrapper/find.spec.js

@@ -186,7 +186,7 @@ describeWithShallowAndMount('find', mountingMethod => {
     const wrapper = mountingMethod(TestComponent)
     if (vueVersion < 2.3) {
       const message =
-        '[vue-test-utils]: find for functional components is not support in Vue < 2.3'
+        '[vue-test-utils]: find for functional components is not supported in Vue < 2.3'
       const fn = () => wrapper.find(TestFunctionalComponent)
       expect(fn)
         .to.throw()