【Vue.js 】vue-jest-utilsでコンポーネントのメソッド発火をテストしてみた件

背景

どうも、最近vue-jest-utilsを触り始めたjest初心者でございます。
今回はコンポーネントのメソッドが発火したかどうかのテストの書き方についてご紹介します。
なんだこんなのって適当にググったら出てくるじゃん、紹介するまでもないやん！
と思ったそこのあなた...僕もそう思ってたんですが、適当ににググっても案外記事が古いせいか、紹介しいた方法はいつの間にか公式非推奨になってたのでちょっとだけ詰んでました... Orz...

まずはテストしたいコンポーネントのコードを見ましょう

// testComponent.vue
<template>
  <span class="test-component" @click="clickMethod">
  </span>
</template>

<script>
export default {
  methods: {
    clickMethod() {
      this.$emit('component-clicked');
    },
  },
};
</script>

極めてコードが短いコンポーネントですね。このコンポーネントのclickMethodの発火テストを書きたいと思います。

だめだった事例を紹介

事例その1

適当にググってみてどういう書き方が良いのかなぁと漁ってみたらまず出てきたのはこの記事です
記事に書いたとおりにsetMedhodsを使って見ようと思って一応公式ドキュメントで使い方をチェック
してみたら、まさかの公式非推奨になると書いてました。

ちなみに無理やり使おうとしたらlintに怒られますw
トホホ...T_T

[vue-test-utils]: setMethods is deprecated and will be removed in the next major version. There is no clear migration path for setMethods - Vue does not support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

事例その2

さらにJESTの公式ドキュメントを参考してみました。、しかし気持ち的にコンポーネントのメソッドをテストファイルに書いてそれを発火させるのは気持ち的に違うなぁと感じでしまったのでこの方法も採用しませんでした。（実際これで行けるかもしれませんが）

ここを参考して書いてみました

最後にこの記事を参考にテストを書きました。
結論から言うとこういう感じでテストしてます。

1. mountしたインスタンス(wrapper）の中のvmからコンポーネントのメソッドを呼び出す
2. 該当メソッドはemitしてたかをテスト

実際のコード

// testComponent.spec.js
// importとdescribeのコードは割愛します。

const wrapper = shallowMount(testComponent);

test('メソッドは正しく発火できる', () => {
    // コンポーネントのmethodをvmから呼び出す
    wrapper.vm.clickMethod();
    
    // イベントはemitされた場合はtrueになる
    expect(wrapper.emitted()['component-clicked']).toBeTruthy();
  });

終わりに

実際のテストはただの２行でしたね...これのためにちょっと時間かかりました（汗）
今回はメソッドの発火だけのテストでしたが、emit時にpayloadは正しいかのテストなどは適当にググってたら出てくるので、そちらを参考して頂けたら幸いです。
最後まで読んで頂きありがとうございます。