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

Kevin · Accepted Answer · 2022-12-07 15:15:32Z

6

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?.()

edited Dec 7, 2022 at 15:15

answered Dec 7, 2022 at 15:12

Kevin

692 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Culda-Daisa Andrei Over a year ago

You could extend this to be dynamic based on the component you are testing: let wrapper: TestWrapper<typeof ImportedComponent>>

Leonardo Rick Over a year ago

Using the composition API I'm not getting access to the computed properties neither methods with this solution. Am I doing something wrong?

Simon · Accepted Answer · 2024-11-11 02:29:59Z

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

answered Nov 11, 2024 at 2:29

Simon

2,7036 gold badges39 silver badges55 bronze badges

Collectives™ on Stack Overflow

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

Solution

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solution

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related