我使用vue-cli创建了一个新的项目，具有以下规范：
- vue 3
- 打字稿
- 无类语法
- vue路由器
- 巴氏合金
- eslint+标准
- 玩笑
- 柏树
当我运行npm run test: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.
尽管我已经使用Javascript很长时间了，但我对打字脚本还很陌生，无法正确阅读错误/理解错误。
测试文件代码：
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
props: { msg }
})
expect(wrapper.text()).toMatch(msg)
})
})
和组件代码
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String
}
})
</script>
如https://github.com/vuejs/vue-test-utils-next/issues/194#issuecomment-695333180
将垫片更改为以下可修复此问题。
declare module '*.vue' {
import { DefineComponent } from 'vue';
const component: DefineComponent;
export default component;
}
截至目前，"propsData"已被弃用，取而代之的是"props"。
看起来shallowMount需要propsData，而不是props。
通常情况下，试图理解这样疯狂的大错误信息是徒劳的。我通常会快速查看它们，看看是否有什么有用的东西，然后尝试一些其他方法，只有在其他方法不起作用的情况下才会返回到大错误信息。
在我需要添加Provide/Injecte之前，接受的答案一直对我有效。NavBar注入userName。下面的代码段由于相同类型的错误而失败。
const wrapper = mount(NavBar, {
props: { msg },
provide: {
userName() {
return "Joe Martin";
},
},
});