In my component, I am utilizing a reactive state that is defined within the script setup section:
const state = reactive({
hello: 'world'
})
This state can be accessed in tests in this manner:
wrapper.vm.state.hello = 'mad-world'
Unfortunately, when using TypeScript checks, the variable types in the vm are not recognized, resulting in an error:
test/unit/components/price/my-component.test.ts:56:16 - error TS2339: Property 'state' does not exist on type 'MyComponent & { $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly<InternalSlots>; ... 7 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: Wat...'.
56 wrapper.vm.state.hello = 'mad-world'
The type declaration for this component is as follows:
export interface MyComponent extends ComponentPublicInstance {
state: {
hello: string
}
}
It is used in the test setup like this:
let wrapper: VueWrapper<MyComponent>
beforeEach(async () => {
wrapper = mount({ ... }) as VueWrapper<MyComponent>
})
While it is possible to expose these variables from the data method within the traditional script tag, this cannot be done with the script setup.