vue-test-utils + typescript type for wrapper.vm

Question

sitting on a issue here. ever used typescript + vue-test-utils and tried to manipulate a value for the test like: wrapper.vm.aCoolRefValueToManipulate = 'something much cooler'?
well i tried. and it worked but ts linter goes crazy on this one because it don't know what aCoolRefValueToManipulate inside vm is.

anyone a idea how to fix this?

linter tells me:

Property 'showTopDown' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & Readonly<...> & Sha...'.ts(2339)

---

Solution

some cool dude helped me on the official Vue Discord Server.

(wrapper.vm as any).aCoolRefValueToManipulate 

Answer 1

Do we have any other ways without using "any" to access into methods of wrapper.vm?

I just found this thing that can try:

type TestWrapper<T> = VueWrapper<ComponentPublicInstance & T>
let wrapper: TestWrapper<Partial<{ myMethod: () => void }>>

wrapper.vm.myMethod?.()

Answer 2

How about defineExpose - this will make the methods public for test purposes.

defineExpose({ showTopDown })

therefore in your test:

wrapper.vm.showTopDown // will be boolean

https://vuejs.org/api/sfc-script-setup#defineexpose