Vue SFC class style component typings in tests

[DevCJames]

I was just wondering if its possible to get the correct typings for components using vue class component in vue test utils?

At the minute when mounting a component using the below method in VTU

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

Wrapper is of type any, meaning there is no autocompletion for methods or properties that are a part of the component.

Is there any way to get the correct typings for the component?

[afontcu]

Hi! Maybe related to #272?

[DevCJames]

I've had a read through that and it looks like its not quite possible then with the current tooling?
I have tried the this answer #272 (comment), however my wrapper still has a type of any.

Is there any other workarounds people can think of?

One way I can get round it is to move the content from the script section into its own .ts file and import that into the test instead. However the project I'm looking at using it on already has around 50 components so I don't really want to have to go through and split out the script content from every one.

[cexbrayat]

@DevCJames Right now, there is sadly not much you can do if you use SFC to have proper types.

But if you initialize the wrapper, it should not be of type any, but at least of type VueWrapper<ComponentPublicInstance>?

If that's not the case, can you give us a small repro so we can investigate?

[DevCJames]

Hey thanks for the reply. Is there any plans to be able to get proper types from SFC or do we just need to wait for the tooling to catch up?

I've just tried creating a fresh project with the cli and when I initialise the wrapper, it's now of type VueWrapper<any>. Is that correct?

[cexbrayat]

It should be a bit better than that, as the CLI generates a shim in shim-vue.d.ts, which should type your wrapper properly.
Anyway, there is no much we can do on VTU side: we need to wait for better tooling.
I usually do const wrapper = mount(Hello) and that works well in our tests.