Vue Test setMethodsのdeprecated対策

setMethodsは公式で非推奨とされてる件

前に書いた記事にも言及しましたけどコンポーネントのメソッドをテストしたい場合よくsetMethodで該当メソッドをmockとしてテストしますが、下記のようなコードはよく見る例です。

// stubはmock関数（メソッド）
const stub = jest.fn();
wrapper.setMethods({
  // executeSearchはテストしたいメソッドで、mock関数をアサインします
  executeSearch: stub,
});

ただ公式は非推奨なので、テストケースとしては実行してもパスしますが、warningエラーが出てくるから鬱陶しいですね... Orz

今回はsetMethodsを使わずにメソッドをテストする方法を紹介します。

今回のシナリオ

リンクをクリックして、exeSearchが正しく発火されたどうかテストしたい

下記のコンポーネントを想定してます。
リンクをクリックしたらexeSearchメソッドが呼び出されます。

<template>
<div>
  <a @click="executeSearch">
    リンク
  </a>
</div>
</template>

...中略

methods: {
    // これが発火されてるかをテストしたい
    executeSearch() {
      // 何かしらの処理
    },
},

今回はvue test utilsでsetMethodsを使わずに該当メソッドをテストする方法を紹介します。

やり方

手順は下記の通り

1. コンポーネントをmount（もしくはshallowMount)の前にjest.spyOnでモック関数を作成する
2. あとはlinkをtriggerでクリックイベントで発火させる
3. モック関数が呼び出されたどうかチェックする。

以上です。

コードはこちら

import { shallowMount } from '@vue/test-utils';
import SearchButton from '@/components/SearchButton';

const spyExecuteSearch = jest.spyOn(SearchButton.methods, 'executeSearch');
const wrapper = shallowMount(SearchButton);

test('はリンクのクリックイベントが正しく発火できる', () => {
    // リンクをアサイン
    const link = wrapper.find('a');
    // クリックイベントを発火させる
    link.trigger('click');
    // モック関数が呼び出されたかチェック
    expect(spyExecuteSearch).toHaveBeenCalled();
  });

おわりに

setMethodsはdeprecatedされるのは仕方がありませんが、せめて公式サイトから代替案を提示してほしいですね。
ちなみにdeprecatedされる理由はこちらの記事の回答コメントに書いてあります。気になる方はご一読して頂けたらと思います。

最後まで見てくださってありがとうございました。ではまた他の記事で。