Unit test fails when generating vue 3 typescript from vue cli

[wyxos]

Version

4.5.6

Reproduction link

https://github.com/wyxos/unit-test-fail

Environment info

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
  Binaries:
    Node: 12.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 85.0.4183.102
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2
    @vue/babel-plugin-jsx:  1.0.0-rc.3
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.5.6
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.5.6
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.6
    @vue/cli-plugin-e2e-cypress: ~4.5.0 => 4.5.6
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.6
    @vue/cli-plugin-router: ~4.5.0 => 4.5.6
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.6
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.6
    @vue/cli-plugin-vuex:  4.5.6
    @vue/cli-service: ~4.5.0 => 4.5.6
    @vue/cli-shared-utils:  4.5.6
    @vue/compiler-core:  3.0.0
    @vue/compiler-dom:  3.0.0
    @vue/compiler-sfc: ^3.0.0-0 => 3.0.0
    @vue/compiler-ssr:  3.0.0
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.0
    @vue/runtime-core:  3.0.0
    @vue/runtime-dom:  3.0.0
    @vue/shared:  3.0.0
    @vue/test-utils: ^2.0.0-0 => 2.0.0-beta.5
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^7.0.0-0 => 7.0.0-beta.3
    jest-serializer-vue:  2.0.2
    typescript: ~3.9.3 => 3.9.7
    vue: ^3.0.0-0 => 3.0.0
    vue-eslint-parser:  7.1.0
    vue-hot-reload-api:  2.3.4
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.4 (3.0.7)
    vue-loader:  15.9.3 (16.0.0-beta.7)
    vue-router: ^4.0.0-0 => 4.0.0-beta.11
    vue-style-loader:  4.1.2
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

vue create app
Vue 3
dart-sass
babel
typescript
router
eslint
unit-test
e2e-cypress
cd app
npm run test:unit

What is expected?

Unit test should pass

What is actually happening?

Unit test fails with typescript error

 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run

    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/uni...' 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/uni...'. 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.

Test Suites: 1 failed, 1 total

[haoqunjiang]

A known issue in the upstream: vuejs/test-utils#194

Seems the shim proposed in this comment vuejs/test-utils#194 (comment) can fix the issue.
Could you please try it out? If that works, I'll propose a PR to change the default shim for Vue 3.

[wyxos]

@sodatea that's correct. Changing the module declaration fixes the unit test and npm run serve still works accordingly.

[martinzaruba82]

I had this issue and the fix: update the .vue file shim for vue 3 did not helped in my case. But I've found this solution:

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld as **any**, {
      props: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

and now my unit test example works fine.