Bug: Overload ts error when prop and slot exist together

[Made-of-Clay]

Describe the bug

When writing a Jest test with test-utils and TypeScript, if both my simple boolean prop and a default slot are added, ts(2769) lights up claiming "No overload matches this call."

To Reproduce

Clone and install this repro repo. Open the /src/components/Foo/Foo.spec.ts file. The errors should display on all mount() calls under Foo.

⚠ Note: If either the default slot or the dark prop definition inside defineProps() is removed, the error goes away. 🤔

Expected behavior

I expect TypeScript to not error on that line.

Related information:

One of the errors being logged:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '__VLS_WithTemplateSlots<DefineComponent<{ dark: BooleanConstructor; }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<...>, { ...; }, {}>, { ...; }>' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, string[], string>'.
      Type '__VLS_WithTemplateSlots<DefineComponent<{ dark: BooleanConstructor; }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<...>, { ...; }, {}>, { ...; }>' 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<{ dark: BooleanConstructor; }>> & {}>, ctx: { attrs: Data; slots: Readonly<...>; emit: (event: string, ...args: any[]) => void; expose: (exposed?: Record<...> | undefined) => void; }) => 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; ... 23 more ...; readonly toLocaleString: (()...'.
            Type '(this: void, props: LooseRequired<Readonly<ExtractPropTypes<{ dark: BooleanConstructor; }>> & {}>, ctx: { attrs: Data; slots: Readonly<...>; emit: (event: string, ...args: any[]) => void; expose: (exposed?: Record<...> | undefined) => void; }) => 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; ... 23 more ...; readonly toLocaleString: (() ...'.
              Types of parameters 'props' and 'props' are incompatible.
                Property 'dark' is missing in 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; ... 23 more ...; readonly toLocaleString: (() => string) & string;...' but required in type 'LooseRequired<Readonly<ExtractPropTypes<{ dark: BooleanConstructor; }>> & {}>'.

It's possible the error is stated in the text, but I have a hard time reading through all this mess. Also, some of the type defs appear truncated (e.g. & string;...). Any good way to get a clearer message? 😬

Additional context

Git Bash CLI

node -v
v16.14.2

Windows 10 - build 19041.1415

[andersonfelix]

I tried this #741, but fails on my

type-check "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json" e build: "build": "run-p type-check build-only"

[koni1234]

I have exactly the same error using the script setup syntax after the upgrade from v. 2.0.0.
The error is present only whe I run the vue-tsc validation.
Tests executions works well anyway.
Tsc validation pass only without slots :(

[koni1234]

A workaround is to wrap your component in another one like this example:

const WrappedComponent = (props: ComponentProps, slots: string = '') => ({
        components: { Foo },
        setup() {
            return { props };
        },
        template: `<foo v-bind="props">${slots}</foo>`,
    });

    const  
        wrapper = mount(
            WrappedComponent(
                props,
                `<template #value="{value}">scoped slot value is "{{ value }}"</template>`
            ),
            { global: { stubs } }
        );
    

In this way I solved all ts errors.

[cexbrayat]

test-utils v2.4.0 should fix this issue (it fixes the repro from the OP)

You can give it a try on your project as we released an alpha.0 version (stable should be out soon).

[felixzapata]

any updates with the release of the version 2.4.0?

[cexbrayat]

@felixzapata we have an alpha out that you can try. If we have no regression reported, we should release a stable version soon.

[felixzapata]

I know and I tried the alpha version. I just waiting for the release in order to update finally the package instead of using an alpha version.

[Soviut]

I just updated to Vue 3.3 and the latest Vitest and encountered this issue. My component seemed to work after removing the withDefaults() macro. However, the upgrading to the 2.4.0 alpha release is what solved it without any code changes.

npm install @vue/test-utils@2.4.0-alpha.1