TS: 2339: Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'

[sschneider-ihre-pvs]

🐛 Bug Report

I have a Vue project with Typescript where I also use vue-test-utils. So in order to test components a Wrapper is used. This looks like this most of the time:

const wrapper: Wrapper<InstanceType<typeof SomeComponent>>;
wrapper = mount(SomeComponent, <options>);

it ('test', () => {
  expect(wrapper.vm.someprop).toBe(true);
})

Hence, the wrapper has a pretty extensive type now. But when I run jest, ts-jest is stating that someprop does not exist on type CombinedVueInstance<Vue, object, object, object, Record<never, any>>, but that is not the type of wrapper.vm.

To Reproduce

Steps to reproduce the behavior:

Expected behavior

ts-jest should use the correct type.

Link to repo (highly encouraged)

Sorry, private project

Debug log:

# content of ts-jest.log :

envinfo

System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
    Memory: 5.35 GB / 15.75 GB
  Binaries:
    Node: 14.17.3
    Yarn: 1.22.4
    npm: 7.20.6
  Utilities:
    Git: 2.27.0.
  IDEs:
    VSCode: 1.59.0
  Languages:
    Java: 11.0.2
  Browsers:
    Edge: Spartan (44.19041.423.0)
    Internet Explorer: 11.0.19041.1
  Npm packages:
    jest:
`-- @vue/cli-plugin-unit-jest@4.5.13
  +-- jest@24.9.0
  `-- ts-jest@24.3.0
    `-- jest@24.9.0 deduped
    ts-jest:
`-- @vue/cli-plugin-unit-jest@4.5.13
  `-- ts-jest@24.3.0
    typescript:
+-- @typescript-eslint/eslint-plugin@4.29.2
| `-- tsutils@3.21.0
|   `-- typescript@4.3.5 deduped
+-- @vue/cli-plugin-typescript@4.5.13
| +-- ts-loader@6.2.2
| | `-- typescript@4.3.5 deduped
| +-- tslint@5.20.1
| | +-- tsutils@2.29.0
| | | `-- typescript@4.3.5 deduped
| | `-- typescript@4.3.5 deduped
| `-- typescript@4.3.5 deduped
`-- typescript@4.3.5

[ahnpnl]

it's hard to debug this without a repository. Most of the time, TypeScript type checking complains the correct thing. I'd suggest you to try your codes with tsc.

What does your IDE show about the type of wrapper?

One thing I noticed in your deps is: you are using jest 24 and ts-jest 24. We are not maintaining 24 25 anymore, only 26 and 27.

[sschneider-ihre-pvs]

I guess the reason why is @vue/cli-plugin-unit-jest. I will try to update that.

[sschneider-ihre-pvs]

(property) Wrapper<object & Record<never, any> & Vue & { $data: Data; $props: Readonly<Partial<{}> & Omit<{ someprop: ISomeProp[]; } & {}, never>>; $attrs: Data; } & ... 4 more ... & Omit<...>, Element>.vm: object & Record<never, any> & Vue & {
    $data: Data;
    $props: Readonly<Partial<{}> & Omit<{
        someprop: ISomeProp[];
    } & {}, never>>;
    $attrs: Data;
} & ... 4 more ... & Omit<...>

[ahnpnl]

ah ha, there you have your answer :)

cc @lmiller1990

[sschneider-ihre-pvs]

eh really? but why is ts-jest complaining about CombinedVueInstance<Vue, object, object, object, Record<never, any>> when it is this other type?

[ahnpnl]

it is not ts-jest, it is TypeScript type checking :) ts-jest uses TypeScript Compiler API to do type checking under the hood.

[sschneider-ihre-pvs]

ok, then what can be the cause of having one type in the editor on another type in the compiler? Could there be an error in a Transform of the .vue file and/or the .spec.ts file ?
So this is more a symptome of an error at a different spot right?

[ahnpnl]

I think it's from a different spot. I think the stack trace should tell you some information.

[lmiller1990]

My guess is

const wrapper: Wrapper<InstanceType<typeof SomeComponent>>;

expect(wrapper.vm.someprop) // <- you did not type `someprop`, so it doesn't exist

What happens if you do:

const wrapper = mount(SomeComponent, {
  props: { /*...*/ }
})

That might work better - a lot of work has gone into inferring the type of props, data etc, as you can see here.

This is assuming you are on Vue 3 - Test Utils and Vue 2 are written in JS, so getting true type safety is very complex and generally not realistic.

Also, as a work around if you just need something to work, you can use any:

(wrapper.vm as any).someProp

[sschneider-ihre-pvs]

it is Vue2 with composition api. I was just baffeled that the types I see in vscode and the one that gets checked deviates.

[sschneider-ihre-pvs]

related to vuejs/vue#8721

[sschneider-ihre-pvs]

It also seems to be a race condition in vscode. Sometimes it shows as CombinedVueInstance somethimes with the other type. is that possible @lmiller1990 ?

[sschneider-ihre-pvs]

It seems like before the vue-composition-api ComponentRenderProxy(or at least something that looks similar) was used as InstanceType and now CombinedVueInstance but I cannot find the reason why

[sschneider-ihre-pvs]

Right now, I am unable to reproduce it myself. I'n now stuck at CombinedVueInstance also :(

[lmiller1990]

So, your IDE says it's okay but ts-jest disagrees?

Is your VS Code using the same TS version as your project?

1. This command
   

2. Choose the same version as your project
   

[sschneider-ihre-pvs]

@lmiller1990 originally, yes, that complex type from above was, in my eyes, the correct one. Sadly now vscode and ts-jest agreed on torturing me with the CombinedVueInstance which doesn't work with Wrapper<InstanceType<typeof CustomComponent>>. now it pretty much boils down to the shim of Wrapper<CombinedVueInstance<jadda,jadda>>