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

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!

[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!

[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!