【Nuxt】spec.tsでVueのMethod内の関数にアクセスする

初めに

通常、vueファイルのmethod内の関数を直接実行する場合は
mountしたVueInstanceにvmでアクセスしてさらに、関数名で参照します

hoge.spec.js

const wrapper =  mount(Index);

// method内のhoge関数にアクセス
wrapper.vm.hoge()

上記のコードをTypeScriptで書く場合にはhogeという関数は@typesには当然定義されていないので　　
コンパイルエラーとなります

一応、vmをanyにアサーションすることによりコンパイルエラーを回避することができますが
anyは存在することがよくないので、
mount()の返り値であるvmを拡張して関数を定義して対応しました

環境について

テストを書く上でか関わってきそうなパッケージのバージョンは以下の通り

• Nuxt: 2.x
• Vuetify: 2.x
• Jest: 27.0
• TypeScript: 4.3.5

spec.tsでVueのMethod内の関数にアクセスする

最初に記載した通り、アクセスするために
mount()の返り値であるvmがVueプロパティを持っているため、
このvueを拡張し、関数を定義して対応しました

import { mount, Wrapper } from "@vue/test-utils";

interface VueExtend extends Vue {
  hoge: Function;
}

interface WrapperExtend extends Wrapper<Vue, Element> {
  vm: VueExtend;
}

describe("test", () => {
  test("hogehoge'", () => {  
    const wrapper =  mount(Index);
    wrapper.vm.hoge()

  });
})

参照

Wrapper の型定義(Github)

今回は、拡張して対応しましたが、上記に挙げた対処法はベストプラクティスとは思っておらず、
まだまだ、改善の余地がありそうです

また、今回の記事はNuxt×TypeScript環境にJest×TypeScriptを導入するのに対応した一部です
そのほかにも導入するための対応についてはブログで書いています