Type error with functional component

[yshrsmz]

Subject of the issue

Describe your issue here.

Wrapper and mount/shallowMount do not support functional components defined with Vue.extend()

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

// test.ts
import Vue, { CreateElement, VNode, RenderContext } from 'vue'

export default Vue.extend({
  name: 'Test',
  functional: true,
  render(createElement: CreateElement, context: RenderContext): VNode {
    return createElement('span', context.data, ['test'])
  },
})

import { RouterLinkStub, shallowMount, mount, Wrapper } from '@vue/test-utils'
import Test from './test'

describe('test', () => {
  // error 1
  let wrapper: Wrapper<Test>

  beforeEach(() => {
    wrapper = mount(Test, {
      context: {
        props: {},
        // error 2
        children: []
      }
    })
  })
})

Error 1

'Test' refers to a value, but is being used as a type here. Did you mean 'typeof Test'?

Error 2

No overload matches this call.
  Overload 1 of 3, '(component: VueClass<CombinedVueInstance<Record<string, any> & Vue, object, object, object, Record<never, any>>>, options?: ThisTypedMountOptions<...> | undefined): Wrapper<...>', gave the following error.
    Type '{ props: {}; children: never[]; }' is not assignable to type 'VNodeData'.
      Object literal may only specify known properties, and 'children' does not exist in type 'VNodeData'.
  Overload 2 of 3, '(component: ComponentOptions<any, DefaultData<any>, DefaultMethods<any>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>, options?: ThisTypedMountOptions<...> | undefined): Wrapper<...>', gave the following error.
    Type 'VueConstructor<Record<string, any> & Vue>' has no properties in common with type 'ComponentOptions<any, DefaultData<any>, DefaultMethods<any>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
  Overload 3 of 3, '(component: FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>, options?: MountOptions<Vue> | undefined): Wrapper<...>', gave the following error.
    Argument of type 'ExtendedVue<Vue, {}, {}, {}, Record<string, any>>' is not assignable to parameter of type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>'.ts(2769)

Expected behaviour

It should compile and work fine without any error.

Actual behaviour

descried above.

Possible Solution

When I change let wrapper: Wrapper<Test> to let wrapper: Wrapper<typeof Test>, it then shows a different error.

No overload matches this call.
  Overload 1 of 3, '(component: VueClass<CombinedVueInstance<Record<string, any> & Vue, object, object, object, Record<never, any>>>, options?: ThisTypedMountOptions<...> | undefined): Wrapper<...>', gave the following error.
    Type '{ props: {}; children: never[]; }' is not assignable to type 'VNodeData'.
      Object literal may only specify known properties, and 'children' does not exist in type 'VNodeData'.
  Overload 2 of 3, '(component: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>, options?: ThisTypedMountOptions<...> | undefined): Wrapper<...>', gave the following error.
    Type 'VueConstructor<Record<string, any> & Vue>' has no properties in common with type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
  Overload 3 of 3, '(component: FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>, options?: MountOptions<Vue> | undefined): Wrapper<...>', gave the following error.
    Argument of type 'ExtendedVue<Vue, {}, {}, {}, Record<string, any>>' is not assignable to parameter of type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>'.ts(2769)

It seems like mount and shallowMount methods work with functional components without Vue.extend(), but does not with Vue.extend()

[yshrsmz]

versions

vue: 2.6.12
@vue/test-utils: 1.1.2
typescript: 4.0.5

[lmiller1990]

Primarily a typing issue, correct?

The types here are really not idea; both Vue 2 and the types here are written manually, so they have some problems. Are you interested in submitting a PR to fix this?

I am guessing the work around for issue 2 is something like mount(Test, {...} as any).