fix: compile extended components (#637)

Author: eddyerburgh

packages/shared/compile-template.js

@@ -3,6 +3,10 @@
 import { compileToFunctions } from 'vue-template-compiler'
 
 export function compileTemplate (component: Component) {
+  if (component.template) {
+    Object.assign(component, compileToFunctions(component.template))
+  }
+
   if (component.components) {
     Object.keys(component.components).forEach((c) => {
       const cmp = component.components[c]
@@ -19,8 +23,4 @@ export function compileTemplate (component: Component) {
   if (component.extendOptions && !component.options.render) {
     compileTemplate(component.options)
   }
-
-  if (component.template) {
-    Object.assign(component, compileToFunctions(component.template))
-  }
 }

packages/shared/validators.js

@@ -41,7 +41,9 @@ export function isVueComponent (component: any) {
 export function componentNeedsCompiling (component: Component) {
   return component &&
     !component.render &&
-    (component.template || component.extends) &&
+    (component.template ||
+      component.extends ||
+      component.extendOptions) &&
     !component.functional
 }
 

test/specs/mount.spec.js

@@ -5,7 +5,10 @@ import Component from '~resources/components/component.vue'
 import ComponentWithProps from '~resources/components/component-with-props.vue'
 import ComponentWithMixin from '~resources/components/component-with-mixin.vue'
 import { injectSupported, vueVersion } from '~resources/utils'
-import { describeRunIf } from 'conditional-specs'
+import {
+  describeRunIf,
+  itDoNotRunIf
+} from 'conditional-specs'
 
 describeRunIf(process.env.TEST_ENV !== 'node',
   'mount', () => {
@@ -131,6 +134,16 @@ describeRunIf(process.env.TEST_ENV !== 'node',
       expect(wrapper.html()).to.equal(`<div>foo</div>`)
     })
 
+    // Problems accessing options of twice extended components in Vue < 2.3
+    itDoNotRunIf(vueVersion < 2.3,
+      'compiles extended components', () => {
+        const TestComponent = Vue.component('test-component', {
+          template: '<div></div>'
+        })
+        const wrapper = mount(TestComponent)
+        expect(wrapper.html()).to.equal(`<div></div>`)
+      })
+
     it('logs if component is extended', () => {
       const msg = '[vue-test-utils]: an extended child component ChildComponent 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 stubs mounting option.'
       const ChildComponent = Vue.extend({