はじめに

Vueでテストを書いている時、script setupで書いた変数にデータが格納されているか確認したい場合、wrapper.vm.変数名と書くことでアクセスできるが、型定義がない。その型定義を拡張する方法があったので備忘として記載。

方法

@vue/runteime-coreのComponentCustomPropertiesというインターフェースを拡張する

import { shallowMount, VueWrapper } from '@vue/test-utils'
import Index from './index.vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    hoge: string
  }
}
const wrapper: VueWrapper = shallowMount(Index)
// エラーにならない
wrapper.vm.hoge

参考にした情報

VueWrapperの型から型引数keyof ComponentCustomPropertiesをたどりコメントを見たところ実装例の記載があった

余談

Vue3正式リリースされて随分と時間がたったけど、Vue test utilsに限らずVue3周りのツールはまだ未完成の部分があったり、ドキュメントが足りてなかったりしてつらい・・・
またVuetifyやNuxtもまだ正式リリースになっていない中サポート期限を迎えるVue2からVue3に乗り換えられるのだろうか・・・？