vue-test-utils +wrapper.vm 的打字稿類型

Question

這裡有一個問題。曾經使用過 typescript vue-test-utils 並嘗試操縱測試的值，例如： wrapper.vm.aCoolRefValueToManipulate = '更酷的東西'?

好吧，我試過了。它有效，但 ts linter 在這個上變得瘋狂，因為它不知道 vm 中的 aCoolRefValueToManipulate 是什麼。

有人知道如何解決這個問題嗎？

linter 告訴我：

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)

---

解決方案

一些很酷的傢伙在官方 Vue Discord 伺服器上幫助了我。

(wrapper.vm as any).aCoolRefValueToManipulate 

Answer 1

我們是否有其他方法不使用「any」來存取wrapper.vm的方法？

我剛剛發現這個可以嘗試的東西：

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

wrapper.vm.myMethod?.()