chore: improve types and add type test

Author: pikax

src/mount.ts

@@ -68,11 +68,18 @@ export type ObjectEmitsOptions = Record<
 export type EmitsOptions = ObjectEmitsOptions | string[]
 
 // Functional component
-export function mount<
-  TestedComponent extends FunctionalComponent<Props>,
-  Props
->(
-  originalComponent: TestedComponent,
+// export function mount<
+//   TestedComponent extends FunctionalComponent<Props, E>,
+//   Props,
+//   E extends EmitsOptions = {}
+// >(
+//   originalComponent: TestedComponent,
+//   options?: MountingOptions<Props>
+// ): VueWrapper<ComponentPublicInstance<Props>>
+
+// Functional component with emits
+export function mount<Props, E extends EmitsOptions = {}>(
+  originalComponent: FunctionalComponent<Props, E>,
   options?: MountingOptions<Props>
 ): VueWrapper<ComponentPublicInstance<Props>>
 

test-dts/mount.d-test.ts

@@ -1,5 +1,10 @@
 import { expectError, expectType } from 'tsd'
-import { DefineComponent, defineComponent, reactive } from 'vue'
+import {
+  DefineComponent,
+  defineComponent,
+  FunctionalComponent,
+  reactive
+} from 'vue'
 import { mount } from '../src'
 
 const AppWithDefine = defineComponent({
@@ -177,3 +182,24 @@ mount(ShimComponent, {
     }
   }
 })
+
+// functional components
+declare const FunctionalComponent: FunctionalComponent<{
+  bar: string
+  level: number
+}>
+declare const FunctionalComponentEmit: FunctionalComponent<
+  {
+    bar: string
+    level: number
+  },
+  { hello: (foo: string, bar: string) => void }
+>
+
+mount(FunctionalComponent)
+mount(defineComponent(FunctionalComponent))
+
+mount(FunctionalComponentEmit)
+
+// @ts-ignore vue 3.0.2 doesn't work. FIX: https://github.com/vuejs/vue-next/pull/2494
+mount(defineComponent(FunctionalComponentEmit))

tests/emit.spec.ts

@@ -134,10 +134,10 @@ describe('emitted', () => {
   })
 
   it('gives a useful warning for functional components', () => {
-    const Component: FunctionalComponent<{ bar: string; level: number }> = (
-      props,
-      ctx
-    ) => {
+    const Component: FunctionalComponent<
+      { bar: string; level: number },
+      { hello: (foo: string, bar: string) => void }
+    > = (props, ctx) => {
       return h(`h${props.level}`, {
         onClick: () => ctx.emit('hello', 'foo', props.bar)
       })