vuejs / vue-test-utils

Component Test Utils for Vue 2
https://vue-test-utils.vuejs.org
MIT License
3.57k stars 669 forks source link

mount and shallowMount do not type check with vue 2.7.x #1993

Open dten opened 2 years ago

dten commented 2 years ago

Subject of the issue

type checking when using vue-utils when using vue 2.7.8 fails because an extra argument was added to the vue types

node_modules/@vue/test-utils/types/index.d.ts:193:80 - error TS2314: Generic type 'ExtendedVue' requires 6 type argument(s).

193 export declare function mount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
                                                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@vue/test-utils/types/index.d.ts:193:170 - error TS2314: Generic type 'CombinedVueInstance' requires 6 type argument(s).

193 export declare function mount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
                                                                                                                                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@vue/test-utils/types/index.d.ts:197:97 - error TS2314: Generic type 'ExtendedVue' requires 6 type argument(s).

197 export declare function shallowMount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
                                                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@vue/test-utils/types/index.d.ts:197:197 - error TS2314: Generic type 'CombinedVueInstance' requires 6 type argument(s).

197 export declare function shallowMount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
                                                                                                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Steps to reproduce

in this repo upgrade vue, vue-template-compiler and typescript (needed to parse the vue d.ts files) then yarn test:types

Expected behaviour

should be compatible

Actual behaviour

❯ yarn test:types
yarn run v1.22.19
$ tsc -p packages/test-utils/types && tsc -p packages/server-test-utils/types
packages/test-utils/types/index.d.ts:191:90 - error TS2314: Generic type 'ExtendedVue' requires 6 type argument(s).

191 export declare function mount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
                                                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/test-utils/types/index.d.ts:191:183 - error TS2314: Generic type 'CombinedVueInstance' requires 6 type argument(s).

191 export declare function mount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
                                                                                                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/test-utils/types/index.d.ts:193:80 - error TS2314: Generic type 'ExtendedVue' requires 6 type argument(s).

193 export declare function mount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
                                                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/test-utils/types/index.d.ts:193:170 - error TS2314: Generic type 'CombinedVueInstance' requires 6 type argument(s).

193 export declare function mount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
                                                                                                                                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/test-utils/types/index.d.ts:197:97 - error TS2314: Generic type 'ExtendedVue' requires 6 type argument(s).

197 export declare function shallowMount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
                                                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/test-utils/types/index.d.ts:197:197 - error TS2314: Generic type 'CombinedVueInstance' requires 6 type argument(s).

197 export declare function shallowMount<V extends Vue, Data, Methods, Computed, Props> (component: ExtendedVue<V, Data, Methods, Computed, Props>, options?: ThisTypedShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, Data, Methods, Computed, Props> & Vue>
                                                                                                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/test-utils/types/index.d.ts:199:87 - error TS2314: Generic type 'ExtendedVue' requires 6 type argument(s).

199 export declare function shallowMount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/test-utils/types/index.d.ts:199:184 - error TS2314: Generic type 'CombinedVueInstance' requires 6 type argument(s).

199 export declare function shallowMount<V extends Vue, Props = DefaultProps> (component: ExtendedVue<V, {}, {}, {}, Props>, options?: FunctionalComponentShallowMountOptions<V>): Wrapper<CombinedVueInstance<V, {}, {}, {}, Props> & Vue>
                                                                                                                                                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/test-utils/types/test/mount.ts:86:10 - error TS2339: Property 'bar' does not exist on type 'Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>'.

86     this.bar
            ~~~

packages/test-utils/types/test/shallow.ts:77:10 - error TS2339: Property 'bar' does not exist on type 'Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>'.

77     this.bar
            ~~~

Found 10 errors in 3 files.

Possible Solution

some changes to support latest vue 2

ColinRosati commented 1 year ago

I havent tried your setup, but had a similar issue with my TS compiler plaining about the components passed into shallowMount/mount.

I did a little type casting to get it working

import { Component } from "vue"
const testComponent: Component = <YourComponent>;
mount(testComponent, {...})