feat(test-utils): add type definitions for ExtendedVue (#1789)

add mount & shallowMount type definitions for ExtendedVue, return type of Vue.extend() method

this fixes #1781

Author: yshrsmz

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

@@ -1,5 +1,6 @@
-import Vue, { VNodeData, ComponentOptions, FunctionalComponentOptions, Component } from 'vue'
+import Vue, { VNodeData, ComponentOptions, FunctionalComponentOptions, Component, RenderContext } from 'vue'
 import { DefaultProps, PropsDefinition } from 'vue/types/options'
+import { ExtendedVue, CombinedVueInstance } from 'vue/types/vue'
 
 /**
  * Utility type to declare an extended Vue constructor
@@ -161,10 +162,18 @@ interface MountOptions<V extends Vue> extends ComponentOptions<V> {
 
 type ThisTypedMountOptions<V extends Vue> = MountOptions<V> & ThisType<V>
 
+interface FunctionalComponentMountOptions<V extends Vue> extends MountOptions<V> {
+  context?: Partial<RenderContext>
+}
+
 type ShallowMountOptions<V extends Vue> = MountOptions<V>
 
 type ThisTypedShallowMountOptions<V extends Vue> = ShallowMountOptions<V> & ThisType<V>
 
+interface FunctionalComponentShallowMountOptions<V extends Vue> extends ShallowMountOptions<V> {
+  context?: Partial<RenderContext>
+}
+
 interface VueTestUtilsConfigOptions {
   stubs: Record<string, Component | boolean | string>
   mocks: Record<string, any>
@@ -179,11 +188,15 @@ export declare let config: VueTestUtilsConfigOptions
 
 export declare function mount<V extends Vue> (component: VueClass<V>, options?: ThisTypedMountOptions<V>): Wrapper<V>
 export declare function mount<V extends Vue> (component: ComponentOptions<V>, options?: ThisTypedMountOptions<V>): Wrapper<V>
-export declare function mount<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(component: FunctionalComponentOptions<Props, PropDefs>, options?: MountOptions<Vue>): Wrapper<Vue>
+export declare function mount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
+export declare function mount<Props = DefaultProps, PropDefs = PropsDefinition<Props>> (component: FunctionalComponentOptions<Props, PropDefs>, options?: MountOptions<Vue>): Wrapper<Vue>
+export declare function mount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
 
 export declare function shallowMount<V extends Vue> (component: VueClass<V>, options?: ThisTypedShallowMountOptions<V>): Wrapper<V>
 export declare function shallowMount<V extends Vue> (component: ComponentOptions<V>, options?: ThisTypedShallowMountOptions<V>): Wrapper<V>
+export declare function shallowMount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
 export declare function shallowMount<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(component: FunctionalComponentOptions<Props, PropDefs>, options?: ShallowMountOptions<Vue>): Wrapper<Vue>
+export declare function shallowMount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
 
 export declare function createWrapper(node: Vue, options?: WrapperOptions): Wrapper<Vue>
 export declare function createWrapper(node: HTMLElement, options?: WrapperOptions): Wrapper<null>

packages/test-utils/types/test/mount.ts

@@ -1,6 +1,6 @@
 import Vuex from 'vuex'
 import VueTestUtils, { mount, createLocalVue, config } from '../'
-import { normalOptions, functionalOptions, ClassComponent } from './resources'
+import { normalOptions, functionalOptions, ClassComponent, extendedFunctionalComponent, extendedNormalComponent } from './resources'
 
 /**
  * Should create wrapper vm based on (function) component options or constructors
@@ -9,10 +9,14 @@ import { normalOptions, functionalOptions, ClassComponent } from './resources'
 const normalWrapper = mount(normalOptions)
 const normalFoo: string = normalWrapper.vm.foo
 
+const extendedNormalWrapper = mount(extendedNormalComponent)
+const extendedNormalFoo: string = extendedNormalWrapper.vm.foo
+
 const classWrapper = mount(ClassComponent)
 const classFoo: string = classWrapper.vm.bar
 
 const functionalWrapper = mount(functionalOptions)
+const extendedFunctionalWrapper = mount(extendedFunctionalComponent)
 
 /**
  * Test for mount options
@@ -62,6 +66,15 @@ mount(functionalOptions, {
   stubs: ['child']
 })
 
+mount(extendedFunctionalComponent, {
+  context: {
+    props: { foo: 'test' },
+    data: {}
+  },
+  attachTo: document.createElement('div'),
+  stubs: ['child']
+})
+
 /**
  * MountOptions should receive Vue's component options
  */

packages/test-utils/types/test/resources.ts

@@ -1,4 +1,4 @@
-import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'
+import Vue, { ComponentOptions, FunctionalComponentOptions, CreateElement, RenderContext, VNode } from 'vue'
 
 /**
  * Normal component options
@@ -15,6 +15,15 @@ export const normalOptions: ComponentOptions<Normal> = {
   }
 }
 
+export const extendedNormalComponent = Vue.extend({
+  name: 'normal',
+  data() {
+    return {
+      foo: 'bar'
+    }
+  }
+})
+
 /**
  * Functional component options
  */
@@ -25,6 +34,16 @@ export const functionalOptions: FunctionalComponentOptions = {
   }
 }
 
+/**
+ * Functional component with Vue.extend()
+ */
+export const extendedFunctionalComponent = Vue.extend({
+  functional: true,
+  render: (createElement: CreateElement, context: RenderContext): VNode => {
+    return createElement('div')
+  }
+})
+
 /**
  * Component constructor declared with vue-class-component etc.
  */

packages/test-utils/types/test/shallow.ts

@@ -1,6 +1,6 @@
 import Vuex from 'vuex'
 import { shallowMount, createLocalVue } from '../'
-import { normalOptions, functionalOptions, ClassComponent } from './resources'
+import { normalOptions, functionalOptions, ClassComponent, extendedFunctionalComponent, extendedNormalComponent } from './resources'
 
 /**
  * Should create wrapper vm based on (function) component options or constructors
@@ -9,10 +9,14 @@ import { normalOptions, functionalOptions, ClassComponent } from './resources'
 const normalWrapper = shallowMount(normalOptions)
 const normalFoo: string = normalWrapper.vm.foo
 
+const extendedNormalWrapper = shallowMount(extendedNormalComponent)
+const extendedNormalFoo: string = extendedNormalWrapper.vm.foo
+
 const classWrapper = shallowMount(ClassComponent)
 const classFoo: string = classWrapper.vm.bar
 
 const functinalWrapper = shallowMount(functionalOptions)
+const extendedFunctionalWrapper = shallowMount(extendedFunctionalComponent)
 
 /**
  * Test for shallowMount options
@@ -54,6 +58,14 @@ shallowMount(functionalOptions, {
   stubs: ['child']
 })
 
+shallowMount(extendedFunctionalComponent, {
+  context: {
+    props: { foo: 'test' },
+    data: {}
+  },
+  stubs: ['child']
+})
+
 /**
  * ShallowMountOptions should receive Vue's component options
  */