Javascript 从CLI生成的新vue 3项目中获取单元测试错误

Javascript 从CLI生成的新vue 3项目中获取单元测试错误,javascript,typescript,unit-testing,vue.js,jestjs,Javascript,Typescript,Unit Testing,Vue.js,Jestjs,我使用vue cli创建了一个具有以下规范的新项目: vue 3 打字稿 无类语法 vue路由器 巴别塔 eslint+标准 开玩笑 柏树 当我运行npm运行测试:unit时,我得到以下错误 TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option): tests/unit/example.spec.ts:7:34 - error TS2769: No over

我使用vue cli创建了一个具有以下规范的新项目:

  • vue 3
  • 打字稿
  • 无类语法
  • vue路由器
  • 巴别塔
  • eslint+标准
  • 开玩笑
  • 柏树
当我运行
npm运行测试:unit
时,我得到以下错误

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    tests/unit/example.spec.ts:7:34 - error TS2769: No overload matches this call.
      The last overload gave the following error.
        Argument of type 'DefineComponent<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, unknown, unknown, Record<string, ComputedGetter<any> | WritableComputedOptions<...>>, ... 7 more ..., { ...; } | {}>' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, unknown, unknown, Record<string, ComputedGetter<any> | WritableComputedOptions<...>>, ... 6 more ..., { ...; } | {}>'.
          Type 'DefineComponent<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, unknown, unknown, Record<string, ComputedGetter<any> | WritableComputedOptions<...>>, ... 7 more ..., { ...; } | {}>' is not assignable to type 'ComponentOptionsBase<Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ... 8 more ..., { ...; } | {}>'.
            Types of property 'setup' are incompatible.
              Type '((this: void, props: Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ctx: import("D:/code/personal/js/med...' is not assignable to type '((this: void, props: Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ctx: import("D:/code/personal/js/med...'. Two different types with this name exist, but they are unrelated.
                Type '(this: void, props: Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; slice?: string[] | undefined; ... 16 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ctx: im...' is not assignable to type '(this: void, props: Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; slice?: string[] | undefined; ... 16 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ctx: im...'. Two different types with this name exist, but they are unrelated.
                  Types of parameters 'ctx' and 'ctx' are incompatible.
                    Type 'SetupContext<string[]>' is not assignable to type 'SetupContext<EmitsOptions>'.
                      Type 'EmitsOptions' is not assignable to type 'string[]'.
                        Type 'Record<string, ((...args: any[]) => any) | null>' is missing the following properties from type 'string[]': length, pop, push, concat, and 28 more.

    7     const wrapper = shallowMount(HelloWorld, {
                                       ~~~~~~~~~~

      node_modules/@vue/test-utils/dist/mount.d.ts:36:25
        36 export declare function mount<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, 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>, D>): VueWrapper<ComponentPublicInstance<ExtractPropTypes<PropsOptions>, RawBindings, D, C, M, E, VNodeProps & ExtractPropTypes<PropsOptions>>>;
                                   ~~~~~
        The last overload is declared here.
和组件代码

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

从“vue”导入{defineComponent}
导出默认定义组件({
名称:“HelloWorld”,
道具:{
msg:String
}
})
看起来像是需要的,而不是
道具

通常情况下,试图理解这些疯狂的错误信息是没有成效的。我通常会快速查看它们,看看是否有什么有用的方法,然后尝试其他一些方法,只有在其他方法不起作用时才会返回大错误消息。

如上所述

将垫片更改为以下位置可解决此问题

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent;
  export default component;
}

在我需要添加提供/注入之前,接受的答案对我有效。NavBar注入用户名。下面的代码段失败,并出现相同类型的错误

const wrapper=mount(导航栏{
道具:{msg},
提供:{
用户名(){
返回“乔·马丁”;
},
},
});

不幸的是,我尝试了你的建议,即将propsData更改为propsData,但这并不能解决测试错误。我实际上进入了mount.d.ts,它说propsData不推荐使用
props?:props;/**@已弃用*/propsData?:道具哦,好的,很抱歉。我不确定那是什么问题。
declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent;
  export default component;
}