Hard/Impossible to find the right generic type for the wrapper (Vue3/TS/VTU2)

[TheDutchCoder]

Problem

When using a variable that you'll mount to later, the type for the variable is impossible to get for beginners of TS, leading to either no typings at all, or (worse) any typings on the wrapper.

Example

describe('Heading', () => {
  // People are probably able to see VueWrapper is needed here, but they don't know what the generic is supposed to be
  let wrapper

  beforeEach(() => {
    wrapper = mount(Heading)
  })
})

The following leads to no typings at all because of <any>

describe('Heading', () => {
  let wrapper: VueWrapper<any>

  beforeEach(() => {
    wrapper = mount(Heading)
  })
})

The correct generic is ComponentPublicInstance (in this case). But that doesn't show up in auto-complete and I found it pretty much just through trial and error.

describe('Heading', () => {
  let wrapper: VueWrapper<ComponentPublicInstance>

  beforeEach(() => {
    wrapper = mount(Heading)
  })
})

Solution

I really don't know enough about TS to offer any kind of help, but I think at least some directions in the documentation could help new users out that have been stuck on this issue.

My main grief with this has been the push for TS with Vue3, which I understand and even applaud. But then immediately getting stuck on pretty much the first step is quite deflating and I've seriously considered dropping TS just because I thought the eco-system (as delivered by vue-cli) simply wasn't ready yet.

Hope this helps and let me know if you guys need any more info!

[cexbrayat]

Hi @TheDutchCoder
Thank you for opening this issue.

ComponentPublicInstance is the base type for components, yes (as you can see in the shim files).
Ideally the type you want there is more complex than that, because with ComponentPublicInstance you don't have any informations on your props, emits, etc. But if you are using SFC in the CLI, this is impossible to get right: the TS compiler can't figure out the type of your component as it is in a .vue file. We need several things in the toolings to make this situation better, and some are out of our hands.

It is indeed a painful situation, but we can't do much on VTU side, sadly. The fundamental problem is not really the Vue or VTU typings, but the TS tooling. This will probably improve in the future though. For now, I personnaly rely on type inference for the wrapper type.

For this issue: I don't know what we can do, except maybe document the generic type in the official docs?

My 2 cents: I'm a long time TS user (I even wrote an ebook about using Vue 3 with TS!), and I do agree that the situation is far from perfect. But I would not drop TS in our projects for anything in the world. In the long run, it gives you an incredible value. The Vue team is working hard to have the components and templates properly typed, and, even if that's not well documented, you'll be able to use this in your TS projects.

[lmiller1990]

TypeScript is very valuable for sure, you can pry it from my code dead hands. That said, I always write component using SFCs (like most people) and as such do not get any typing for data, props etc in mount. I still get typings on wrapper methods, which is very useful.

I am still of the opinion that until the types work for the majority of cases, we should just type the first argument to mount as any. Like mentioned above, there isn't anything we can do to make the types better in VTU at this moment, but there is potentially something we can do to make the overall DX better. We cannot move to a stable 2.0.0 as it stands, and I don't think the tooling will be where it needs to be anytime in the immediate future.

[lmiller1990]

What is Header here @TheDutchCoder? Is it a vue file? (assuming so).

[lmiller1990]

Let's try discussing this with the new discussions feature: #273

[pikax]

Have you tried?

  let wrapper = mount(Heading); // setting the type

  beforeEach(() => {
    wrapper = mount(Heading)
  })
})

[TheDutchCoder]

Hey guys, thanks for responding to this issue, I appreciate it!

@cexbrayat thanks for the explanation, I understand how difficult TS is/can be in those situations. I think the main issue I'm having with all of this is that on the one hand SFC's + TS get pushed quite a bit by the Vue team (rightfully so in most cases), yet it seems to pose some problems (like this one) in the tooling.

I haven't had a deep dive into TS + Vue3, but what I find interesting is that Vetur (the VSCode plugin), seems to have no issue with .vue files. Doesn't Vetur also just lean on a TS compiler for this? So I wonder what the difference is?

But let's move this to the discussion instead, so I don't litter this issue :)

@pikax That's an excellent point, that does work indeed, so that's a great way to make it all work, it's just not a very intuitive way to write TS/JS I would say, but in this case it's certainly a good option, thanks!

[cexbrayat]

@TheDutchCoder Your intuition is right and Vetur does work, but uses its own service and then feeds the result to the TS langage server. In the long term, the hope is to do roughly the same in the CLI, and that'll be transparent for users like us. But for now, we have to bite the bullet and suffer a bit in some cases 😬

[TheDutchCoder]

Got it, thanks for explaining! I wrote a short novel (lol) on the discussion thread, hope it can shed some (user) light!

[pikax]

@pikax That's an excellent point, that does work indeed, so that's a great way to make it all work, it's just not a very intuitive way to write TS/JS I would say, but in this case it's certainly a good option, thanks!

I mean this is nothing to do with vue-test-utils or vue at all, this is purely typescript behaviour, you can translate your example to a simple types:

describe('Heading', () => {
  let wrapper: boolean

  beforeEach(() => {
    wrapper = 'hello' // error here
  })
})

[afontcu]

Closing this as there's nothing inherently wrong with the test utils, and setting the initial wrapper value before beforeEach works as expected.

Thank you all!

[neilgaietto]

Here is the solution I came up with to prevent that extra mount used to define that wrapper variable type.
Basically you can define a variable type by the return type of a function to make this easy.

  function mountComponent() {
    return mount(Heading);
  }

  let wrapper: ReturnType<typeof mountComponent>;

  beforeEach(() => {
    wrapper = mountComponent();
  });

[danielelkington]

Building on @neilgaietto's idea, we can make this generic.

function mountComponent<T>(component: T) {
  return mount(component);
}

type WrapperType<T> = ReturnType<typeof mountComponent<T>>;

// Usage:
let wrapper: WrapperType<typeof Heading>;