从 CLI 生成的新 vue 3 项目的单元测试中出错
Posted
技术标签:
【中文标题】从 CLI 生成的新 vue 3 项目的单元测试中出错【英文标题】:Getting error in unit test from new vue 3 project generated by CLI 【发布时间】:2021-01-06 20:16:58 【问题描述】:我使用具有以下规格的 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 很长时间了,但我还是 typescript 的新手,无法正确阅读/理解错误。
测试文件代码:
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>
【问题讨论】:
【参考方案1】:看起来shallowMount
需要propsData
,而不是props
。
通常情况下,将头撞到墙上试图理解那些疯狂的错误消息并没有什么成果。我通常会快速查看它们,看看是否有任何有用的东西,然后尝试一些其他方法,如果其他方法不起作用,则只返回大错误消息。
【讨论】:
不幸的是,我尝试了您的建议,即将 props 更改为 propsData 但这并不能解决测试错误。 我实际上进入了 mount.d.ts,上面写着 propsData 已被弃用props?: Props; /** @deprecated */ propsData?: Props;
哦,好吧,对不起。我不确定那是什么问题。【参考方案2】:
正如https://github.com/vuejs/vue-test-utils-next/issues/194#issuecomment-695333180 所建议的那样
将 shim 更改为以下可以解决问题。
declare module '*.vue'
import DefineComponent from 'vue';
const component: DefineComponent;
export default component;
【讨论】:
【参考方案3】:在我需要添加提供/注入之前,接受的答案对我有用。 NavBar 注入用户名。下面的 sn-p 失败并出现相同类型的错误。
const wrapper = mount(NavBar,
props: msg ,
provide:
userName()
return "Joe Martin";
,
,
);
【讨论】:
以上是关于从 CLI 生成的新 vue 3 项目的单元测试中出错的主要内容,如果未能解决你的问题,请参考以下文章