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

Question

这里有一个问题。曾经使用过 typescript + vue-test-utils 并尝试操纵测试的值，例如：

wrapper.vm.aCoolRefValueToManipulate = 'something much cooler'

？
好吧，我试过了。它起作用了，但是 ts linter 在这个上变得疯狂，因为它不知道

aCoolRefValueToManipulate

里面的

vm

是什么。

有人知道如何解决这个问题吗？

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

Answer 2

defineExpose 怎么样 - 这将使方法公开以用于测试目的。

defineExpose({ showTopDown }) 因此在你的测试中：

wrapper.vm.showTopDown // will be boolean

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