fix: stop extending from constructor functions (#1014)

Author: eddyerburgh

packages/create-instance/create-instance.js

@@ -84,10 +84,11 @@ export default function createInstance (
   if (vueVersion > 2.2) {
     for (const c in _Vue.options.components) {
       if (!isRequiredComponent(c)) {
-        const extendedComponent = _Vue.extend(_Vue.options.components[c])
-        extendedComponent.options.$_vueTestUtils_original =
-          _Vue.options.components[c]
-        _Vue.component(c, _Vue.extend(_Vue.options.components[c]))
+        const comp = _Vue.options.components[c]
+        const options = comp.options ? comp.options : comp
+        const extendedComponent = _Vue.extend(options)
+        extendedComponent.options.$_vueTestUtils_original = comp
+        _Vue.component(c, extendedComponent)
       }
     }
   }
@@ -105,13 +106,10 @@ export default function createInstance (
 
   // extend component from _Vue to add properties and mixins
   // extend does not work correctly for sub class components in Vue < 2.2
-  const Constructor = typeof component === 'function' && vueVersion < 2.3
-    ? component.extend(instanceOptions)
+  const Constructor = typeof component === 'function'
+    ? _Vue.extend(component.options).extend(instanceOptions)
     : _Vue.extend(component).extend(instanceOptions)
 
-  // Keep reference to component mount was called with
-  Constructor._vueTestUtilsRoot = component
-
   // used to identify extended component using constructor
   Constructor.options.$_vueTestUtils_original = component
   if (options.slots) {

packages/create-instance/extend-extended-components.js

@@ -1,18 +1,6 @@
 import { warn } from 'shared/util'
 import { addHook } from './add-hook'
 
-function createdFrom (extendOptions, componentOptions) {
-  while (extendOptions) {
-    if (extendOptions === componentOptions) {
-      return true
-    }
-    if (extendOptions._vueTestUtilsRoot === componentOptions) {
-      return true
-    }
-    extendOptions = extendOptions.extendOptions
-  }
-}
-
 function resolveComponents (options = {}, components = {}) {
   let extendOptions = options.extendOptions
   while (extendOptions) {
@@ -76,8 +64,7 @@ export function extendExtendedComponents (
           `config.logModifiedComponents option to false.`
         )
       }
-
-      const extendedComp = _Vue.extend(comp)
+      const extendedComp = _Vue.extend(comp.options)
       // Used to identify component in a render tree
       extendedComp.options.$_vueTestUtils_original = comp
       extendedComponents[c] = extendedComp
@@ -94,7 +81,10 @@ export function extendExtendedComponents (
   })
   if (Object.keys(extendedComponents).length > 0) {
     addHook(_Vue.options, 'beforeCreate', function addExtendedOverwrites () {
-      if (createdFrom(this.constructor, component)) {
+      if (
+        this.constructor.extendOptions === component ||
+        this.$options.$_vueTestUtils_original === component
+      ) {
         Object.assign(
           this.$options.components,
           extendedComponents

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

@@ -66,19 +66,19 @@ describeWithMountingMethods('options.localVue', mountingMethod => {
   itSkipIf(
     vueVersion < 2.3,
     'is applied to deeply extended components', () => {
-      const GrandChildComponent = Vue.extend(Vue.extend({
+      const GrandChildComponent = Vue.extend({
         template: '<div>{{$route.params}}</div>'
-      }))
-      const ChildComponent = Vue.extend(Vue.extend(Vue.extend({
+      })
+      const ChildComponent = Vue.extend({
         template: '<div><grand-child-component />{{$route.params}}</div>',
         components: {
           GrandChildComponent
         }
-      })))
-      const TestComponent = Vue.extend(Vue.extend({
+      })
+      const TestComponent = Vue.extend({
         template: '<child-component />',
         components: { ChildComponent }
-      }))
+      })
       const localVue = createLocalVue()
       localVue.prototype.$route = {}
 
@@ -119,16 +119,16 @@ describeWithMountingMethods('options.localVue', mountingMethod => {
         template: '<div/>',
         extends: BaseGrandChildComponent
       }
-      const ChildComponent = Vue.extend(({
+      const ChildComponent = Vue.extend({
         template: '<div><grand-child-component />{{$route.params}}</div>',
         components: {
           GrandChildComponent
         }
-      }))
-      const TestComponent = Vue.extend(Vue.extend({
+      })
+      const TestComponent = Vue.extend({
         template: '<div><child-component /></div>',
         components: { ChildComponent }
-      }))
+      })
       const localVue = createLocalVue()
       localVue.prototype.$route = {}