Bug: mount doesn't accept vue component

[brachkow]

Describe the bug I import my component and trying to put it into mount. But then I get some incomprehensible error coming from mount type definition.

src/components/VTextInput.test.ts:17:21 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: { modelValue?: string | undefined; ref?: VNodeRef | undefined; readonly label?: string | undefined; ... 13 more ...; readonly tip?: string | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: ...' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, string[], string>'.
      Type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: { modelValue?: string | undefined; ref?: VNodeRef | undefined; readonly label?: string | undefined; ... 13 more ...; readonly tip?: string | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: ...' is not assignable to type 'ComponentOptionsBase<{ [x: number]: unknown; [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined; readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?: Prop<unknown, unknown> | { (...items: ConcatArray<...>[]): string[]; (...items: (string | ConcatArray<...>)[]): s...'.
        Types of property 'setup' are incompatible.
          Type '((this: void, props: LooseRequired<Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, { modelValue: string; tags: string; }>>> & {}>, ctx: { ...; }) => void | ... 2 more ... | Promise<...>) | undefined' is not assignable to type '((this: void, props: LooseRequired<{ [x: number]: unknown; [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined; readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?: Prop<unknown, unknown> | { ...; } | null | undefined; ... 21 more ...; readonly toLocaleString: (()...'.
            Type '(this: void, props: LooseRequired<Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, { modelValue: string; tags: string; }>>> & {}>, ctx: { ...; }) => void | ... 2 more ... | Promise<...>' is not assignable to type '(this: void, props: LooseRequired<{ [x: number]: unknown; [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined; readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?: Prop<unknown, unknown> | { ...; } | null | undefined; ... 21 more ...; readonly toLocaleString: (() ...'.
              Types of parameters 'props' and 'props' are incompatible.
                Type 'LooseRequired<{ [x: number]: unknown; [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined; readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?: Prop<unknown, unknown> | { ...; } | null | undefined; ... 21 more ...; readonly toLocaleString: (() => string) & string;...' is missing the following properties from type 'LooseRequired<Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, { modelValue: string; tags: string; }>>> & {}>': modelValue, label, type, error, tip

17     wrapper = mount(VTextInput, { shallow: true, props: defaultProps });
                       ~~~~~~~~~~

  node_modules/.pnpm/@vue+test-utils@2.3.2_vue@3.3.4/node_modules/@vue/test-utils/dist/mount.d.ts:33:25
    33 export declare function mount<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D extends {}, C extends ComputedOptions = {}, M extends Record<string, Function> = {}, E extends EmitsOptions = Record<string, any>, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, EE extends string = string>(componentOptions: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, Mixin, Extends, EE>, options?: MountingOptions<ExtractPropTypes<PropsOptions> & PublicProps, D>): VueWrapper<ComponentPublicInstance<ExtractPropTypes<PropsOptions>, RawBindings, D, C, M, E, VNodeProps & ExtractPropTypes<PropsOptions>>>;
                               ~~~~~
    The last overload is declared here.

To Reproduce Code that causes bug can be found at https://github.com/tough-dev-school/lms-frontend-v2/blob/pnpm/src/components/VTextInput.test.ts, and output

Expected behavior Mount receives component and doesn't return type error.

Related information:

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 61.73 MB / 16.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  npmPackages:
    @vue/test-utils: ^2.3.2 => 2.3.2 
    vitest: ^0.32.0 => 0.32.0 
    vue: ^3.3.4 => 3.3.4 

Additional context I guess the problem can be somewhere in my configuration — if I start project with vite new, I have no such error. I already aligned my package.json with the one from vite new, but it didn't help.

[cexbrayat]

Hi @brachkow

Would you mind trying with v2.4.0-alpha.2 ? It might solve the issue as we improved the types. If that doesn't work, try to make a minimal reproduction online with https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts and we'll take a look

[brachkow]

Yes, all errors disappeared. Thanks!