TypeScript:测试包含Cypress插槽的Vue3组件

w51jfk4q  于 7个月前  发布在  Vue.js
关注(0)|答案(1)|浏览(75)

我在尝试设置一个新项目时遇到了麻烦。我正在使用Vue3,TypeScript,Cypress。问题可能在TypeScript配置的某个地方。
下面是一个MWE。我会很感激一点帮助。
我在src/component/MinimalWorkingExample.vue中有这个Vue3组件:

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

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

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

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

字符串
我在src/component/MinimalWorkingExample.cy.ts中对该组件进行了Cypress测试:

import MinimalWorkingExample from "./MinimalWorkingExample.vue";

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


我的IDE在cy.mount(MinimalWorkingExample, ...中给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, ComponentOp
tionsMixin, 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?: numb
er | 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; reado
nly 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停止了对MinimalWorkingExample的解压,vue-tsc --noEmit成功完成,没有输出。
当我保留<slot></slot>并摆脱headerText: string;属性时,它也是成功的。
cy.mount(MinimalWorkingExample as any, ...中使用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"
  ]
}

11dmarpk

11dmarpk1#

可能通过使用以下cypress.d.ts修复:

import { ComponentMountingOptions, Vue } from "vue";

declare global {
  namespace Cypress {
    interface Chainable {
      mount<Component extends Vue>(
        component: Component,
        options?: ComponentMountingOptions<Component>
      ): Chainable<any>;
    }
  }
}

字符串
(我仍然不知道我在做什么)。

相关问题