fix: automatically extend extended child components (#595)

Author: eddyerburgh

docs/en/api/config.md

@@ -79,3 +79,18 @@ VueTestUtils.config.provide['$logger'] = {
   }
 }
 ```
+
+### `logModifiedComponents`
+
+- type: `Boolean`
+- default: `true`
+
+Logs warning when extended child components are automatically stubbed. Hides warnings when set to `false`. Unlike other config options, this cannot be set on the mounting options.
+
+Example:
+
+```js
+import VueTestUtils from '@vue/test-utils'
+
+VueTestUtils.config.logModifiedComponents = false
+```

flow/options.flow.js

@@ -9,5 +9,6 @@ declare type Options = { // eslint-disable-line no-undef
     stubs?: Object,
     context?: Object,
     attrs?: Object,
-    listeners?: Object
+    listeners?: Object,
+    logModifiedComponents?: Boolean
 }

packages/create-instance/compile-template.js

@@ -9,8 +9,8 @@ import addListeners from './add-listeners'
 import addProvide from './add-provide'
 import { addEventLogger } from './log-events'
 import { createComponentStubs } from 'shared/stub-components'
-import { throwError } from 'shared/util'
-import { compileTemplate } from './compile-template'
+import { throwError, warn } from 'shared/util'
+import { compileTemplate } from 'shared/compile-template'
 import deleteoptions from './delete-mounting-options'
 import createFunctionalComponent from './create-functional-component'
 import { componentNeedsCompiling } from 'shared/validators'
@@ -70,6 +70,16 @@ export default function createInstance (
     }
   }
 
+  Object.keys(component.components || {}).forEach((c) => {
+    if (component.components[c].extendOptions &&
+      !instanceOptions.components[c]) {
+      if (options.logModifiedComponents) {
+        warn(`an extended child component ${c} has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the mocks mounting option.`)
+      }
+      instanceOptions.components[c] = vue.extend(component.components[c])
+    }
+  })
+
   Object.keys(stubComponents).forEach(c => {
     vue.component(c, stubComponents[c])
   })

packages/create-instance/create-instance.js

@@ -49,7 +49,8 @@ interface VueTestUtilsConfigOptions {
   stubs?: Stubs
   mocks?: object
   methods?: Record<string, Function>
-  provide?: object
+  provide?: object,
+  logModifiedComponents?: Boolean
 }
 
 export declare let config: VueTestUtilsConfigOptions

packages/server-test-utils/types/index.d.ts

@@ -11,9 +11,15 @@ export function compileTemplate (component: Component) {
       }
     })
   }
+
   if (component.extends) {
     compileTemplate(component.extends)
   }
+
+  if (component.extendOptions && !component.options.render) {
+    compileTemplate(component.options)
+  }
+
   if (component.template) {
     Object.assign(component, compileToFunctions(component.template))
   }

packages/shared/compile-template.js

@@ -26,6 +26,7 @@ export function mergeOptions (
 ): Options {
   return {
     ...options,
+    logModifiedComponents: config.logModifiedComponents,
     stubs: getOptions('stubs', options.stubs, config),
     mocks: getOptions('mocks', options.mocks, config),
     methods: getOptions('methods', options.methods, config),

packages/shared/merge-options.js

@@ -8,5 +8,6 @@ export default {
   },
   mocks: {},
   methods: {},
-  provide: {}
+  provide: {},
+  logModifiedComponents: true
 }

packages/test-utils/src/config.js

@@ -8,7 +8,7 @@ import config from './config'
 import { warn } from 'shared/util'
 
 function shallow (component, options) {
-  warn('shallow has been renamed to shallowMount and will be deprecated in 1.0.0')
+  warn('shallow has been renamed to shallowMount. shallow will be removed in 1.0.0, use shallowMount instead')
   return shallowMount(component, options)
 }
 

packages/test-utils/src/index.js

@@ -139,7 +139,8 @@ interface VueTestUtilsConfigOptions {
   stubs?: Stubs
   mocks?: object
   methods?: Record<string, Function>
-  provide?: object
+  provide?: object,
+  logModifiedComponents?: Boolean
 }
 
 export declare function createLocalVue (): typeof Vue