Merge pull request #254 from pikax/fix/class-component

fix(types): Fix mount and shallowMount types

Author: lmiller1990

src/mount.ts

@@ -35,7 +35,6 @@ import { attachEmitListener } from './emitMixin'
 import { createDataMixin } from './dataMixin'
 import { MOUNT_COMPONENT_REF, MOUNT_PARENT_NAME } from './constants'
 import { stubComponents } from './stubs'
-import { VueConstructor } from 'vue-class-component'
 
 // NOTE this should come from `vue`
 type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps
@@ -50,11 +49,24 @@ export type ObjectEmitsOptions = Record<
 >
 export type EmitsOptions = ObjectEmitsOptions | string[]
 
-// Class component
-export function mount(
-  originalComponent: VueConstructor,
+// Class component - no props
+export function mount<V>(
+  originalComponent: {
+    new (...args: any[]): V
+    registerHooks(keys: string[]): void
+  },
   options?: MountingOptions<any>
-): VueWrapper<ComponentPublicInstance<any>>
+): VueWrapper<ComponentPublicInstance<V>>
+
+// Class component - props
+export function mount<V, P>(
+  originalComponent: {
+    new (...args: any[]): V
+    props(Props: P): any
+    registerHooks(keys: string[]): void
+  },
+  options?: MountingOptions<P>
+): VueWrapper<ComponentPublicInstance<V>>
 
 // Functional component with emits
 export function mount<Props, E extends EmitsOptions = {}>(

test-dts/mount.d-test.ts

@@ -5,6 +5,7 @@ import {
   FunctionalComponent,
   reactive
 } from 'vue'
+import { Options, Vue } from 'vue-class-component'
 import { mount } from '../src'
 
 const AppWithDefine = defineComponent({
@@ -203,3 +204,25 @@ mount(FunctionalComponentEmit)
 
 // @ts-ignore vue 3.0.2 doesn't work. FIX: https://github.com/vuejs/vue-next/pull/2494
 mount(defineComponent(FunctionalComponentEmit))
+
+// class component
+
+@Options({
+  props: {
+    msg: String
+  }
+})
+class ClassComponent extends Vue {
+  dataText: string = ''
+  get computedMsg(): string {
+    return `Message: ${(this.$props as any).msg}`
+  }
+
+  changeMessage(text: string): void {
+    this.dataText = 'Updated'
+  }
+}
+
+// @ts-expect-error it requires an argument
+expectError(mount(ClassComponent, {}).vm.changeMessage())
+mount(ClassComponent, {}).vm.changeMessage('')

test-dts/shallowMount.d-test.ts

@@ -1,5 +1,6 @@
 import { expectError, expectType } from 'tsd'
 import { defineComponent } from 'vue'
+import { Options, Vue } from 'vue-class-component'
 import { shallowMount } from '../src'
 
 const AppWithDefine = defineComponent({
@@ -99,3 +100,24 @@ expectError(
 shallowMount(AppWithoutProps, {
   props: { b: 'Hello' } as never
 })
+
+// class component
+@Options({
+  props: {
+    msg: String
+  }
+})
+class ClassComponent extends Vue {
+  dataText: string = ''
+  get computedMsg(): string {
+    return `Message: ${(this.$props as any).msg}`
+  }
+
+  changeMessage(text: string): void {
+    this.dataText = 'Updated'
+  }
+}
+
+// @ts-expect-error it requires an argument
+expectError(shallowMount(ClassComponent, {}).vm.changeMessage())
+shallowMount(ClassComponent, {}).vm.changeMessage('')