Vue 3 initial unit test does not work: Property "msg" was accessed during render but is not defined on instance.

Version

3.0.0

Reproduction link

https://github.com/E-jarod/vue3-test.git

Steps to reproduce

Hello, I have simply created a new Vue 3.0.0 (vue create vue3-test) project with the following preset : ~/.vuerc

{
  ...
  "presets": {
    "personal-basic-vue3": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-router": {
          "historyMode": true
        },
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save",
            "commit"
          ]
        },
        "@vue/cli-plugin-unit-jest": {},
        "@vue/cli-plugin-e2e-cypress": {}
      },
      "vueVersion": "3",
      "cssPreprocessor": "dart-sass"
    }
  }
}

I come from angular and I am new to Vue. Everything else works fine, but not the jest unit test.

You can see on my github repo.

What is expected?

The jest test should at least works, because it is the starter project.

What is actually happening?

And when I run :

yarn test:unit
# or
npm run test:unit

I get the following Error

❯ y test:unit
yarn run v1.22.5
$ vue-cli-service test:unit
 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<{}, {}, {}, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ComponentOptionsMixin, ... 5 more ..., {}>' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, {}, {}, Record<string, ComputedGetter<any> | WritableComputedOptions<...>>, ... 6 more ..., { ...; } | {}>'.
          Property 'props' is missing in type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Pick<Readonly<{} & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "key" | ... 8 more ... | "style">; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | und...' but required in type '{ props: (readonly string[] & ThisType<void>) | (Readonly<ComponentObjectPropsOptions<Record<string, unknown>>> & ThisType<void>); }'.

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

      node_modules/@vue/runtime-core/dist/runtime-core.d.ts:336:5
        336     props: PropsOptions & ThisType<void>;
                ~~~~~
        'props' is declared here.
      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
Tests:       0 total
Snapshots:   0 total
Time:        2.526s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

---

Can you detail why this is happening ?

[taylorjdawson]

I have the exact same issue as @alperkay and @juan267. This should be reopened.

[juan267]

I think this only happens when you start the project using vue-class-component package. In that case the above proposed fix does fix the TS overload issue but you then get this when running the test:

  console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
    [Vue warn]: Property "msg" was accessed during render but is not defined on instance. 
      at <Anonymous msg="blah" ref="VTU_COMPONENT" > 
      at <VTUROOT>

I guess this might be an issue between vue-class-component and vue-test-utils