Vue3+TypeScript+Cypress测试含slot组件的TypeScript类型错误问题

我在搭建Vue3、TypeScript、Cypress的新项目时，遇到了TypeScript类型错误，推测是配置或类型定义冲突导致的。以下是最小复现场景：

组件代码 (src/component/MinimalWorkingExample.vue) #

<script setup lang="ts">
interface Props {
  headerText: string;
}

const props = defineProps<Props>();
</script>

<template>
  <div>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped></style>

Cypress测试代码 (src/component/MinimalWorkingExample.cy.ts) #

import MinimalWorkingExample from "./MinimalWorkingExample.vue";

describe("<MinimalWorkingExample />", () => {
  it("renders", () => {
    cy.mount(MinimalWorkingExample, {
      props: { headerText: "Testing" },
      slots: { default: "Testing text ..." },
    });
  });
});

错误信息 #

IDE中cy.mount的第一个参数MinimalWorkingExample标红，提示No overload matches this call，执行vue-tsc --noEmit时也报同样错误，详细错误如下：

src/component/MinimalWorkingExample.cy.ts:5:14 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '__VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 5 more ..., {}>, { ...; }>' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, string[], string>'.
      Type '__VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 5 more ..., {}>, { ...; }>' 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_TypePropsToRuntimeProps<Props>>> & {}>, 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; ... 27 more ...; readonly toLocaleString: (()...'.
            Type '(this: void, props: LooseRequired<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {}>, 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; ... 27 more ...; readonly toLocaleString: (() ...'.
              Types of parameters 'props' and 'props' are incompatible.
                Property 'headerText' 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; ... 27 more ...; readonly toLocaleString: (() => string) & string;...' but required in type 'LooseRequired<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {}>'.

5     cy.mount(MinimalWorkingExample, {
               ~~~~~~~~~~~~~~~~~~~~~

  src/component/MinimalWorkingExample.vue:3:3
    3   headerText: string;
        ~~~~~~~~~~
    'headerText' is declared here.
  node_modules/cypress/vue/dist/index.d.ts:1377:18
    1377 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>): Cypress.Chainable<{
                          ~~~~~
    The last overload is declared here.


Found 1 error in src/component/MinimalWorkingExample.cy.ts:5

特殊现象 #

• 注释掉组件模板中的<slot></slot>后，IDE不再报错，vue-tsc --noEmit执行成功；
• 保留<slot></slot>但移除Props中的headerText: string属性时，也能执行成功；
• 使用cy.mount(MinimalWorkingExample as any, ...)可以绕过错误，但希望保留完整的TypeScript类型检查。

tsconfig.json 配置 #

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable"
    ],
    "allowJs": false,
    "jsx": "preserve",
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "types": [
      "node",
      "vite/client",
      "cypress",
      "./src/shims-vue.d.ts"
    ]
  },
  "include": [
    "src",
    "test/cypress"
  ]
}

求解决这个类型错误的方法，谢谢。

内容的提问来源于stack exchange，提问作者McLayn