【Vue】router.pushメソッドのテストの書き方

はじめに

小トロです～

Vueの勉強をしていた時に、

vue-routerにあるpushメソッドのテストをどうするか困ってました。

自分なりにテストが書けたので、記録用に記事に書きます！

テストサンプル

検索ボタンを押したら、入力部分をパラメータに画面遷移する

TopView.vueという画面コンポーネントがあるとします。

今回は

this.$router.push({ name: 'search-result', params: { word: this.msg }});

のテストをします。

(細かい部分は省略)

<template>
  <div>
  <span>
      <p>テストサンプル</p>
      <input type="text" v-model="msg" />
      <button @click="search()">検索</button>
  </span>
  </div>
</template>

<script>
export default {
    name: "TopView",
    data() {
        return {
            msg: ""
        };
    },
    methods: {
        search() {
            this.$router.push({ name: 'search-result', params: { word: this.msg }});
        }
    }
}
</script>

<style>

</style>

次に、TopView.vueのテストサンプルになります。

import { shallowMount } from '@vue/test-utils'
import TopView from '../../src/components/TopView.vue'

describe('TopView.vue', () => {
  it('クリック時に$route.pushが実行される', () => {
    const mockRouterPush = jest.fn();
    const app_mount = shallowMount(TopView, {
      mocks: {
        $router: {
          push: mockRouterPush
        },
      }
    });
    expect(mockRouterPush.mock.calls.length).toBe(0);


    app_mount.find('button').trigger('click');


    expect(mockRouterPush.mock.calls.length).toBe(1);
  });

  it('$route.pushの引数が正しい', () => {
    const mockRouterPush = jest.fn();
    const app_mount = shallowMount(TopView, {
      mocks: {
        $router: {
          push: mockRouterPush
        },
      }
    });
    const test_word = 'test-word'
    app_mount.find('input').setValue(test_word);
    app_mount.find('button').trigger('click');


    expect(mockRouterPush).toHaveBeenCalledWith({
      name: 'search-result',
      params: {
        word: test_word
      }
    });
  });
});

$route.pushがクリックされたことのテスト

jestを使って、$router.push用のモックを作成しています。

作成したモックはTopViewのマウント時に読み込ませています。

後は、モックのメソッドを使って、メソッドが呼び出された回数を比較してテストしています。

  it('クリック時に$route.pushが実行される', () => {
    const mockRouterPush = jest.fn();
    const app_mount = shallowMount(TopView, {
      mocks: {
        $router: {
          push: mockRouterPush
        },
      }
    });
    expect(mockRouterPush.mock.calls.length).toBe(0);


    app_mount.find('button').trigger('click');


    expect(mockRouterPush.mock.calls.length).toBe(1);
  });

$route.pushの引数が正しいことのテスト

先ほどと同じく$router.push用のモックを読み込んでTopViewをマウントしています。

そのあと、inputの入力部分にテスト用の文字列を入れ込んで、ボタンをクリックさせています。

$route.pushの引数は、mockRouterPushにそのまま入っているので、そのまま比較のテストを書けます。

  it('$route.pushの引数が正しい', () => {
    const mockRouterPush = jest.fn();
    const app_mount = shallowMount(TopView, {
      mocks: {
        $router: {
          push: mockRouterPush
        },
      }
    });
    const test_word = 'test-word'
    app_mount.find('input').setValue(test_word);
    app_mount.find('button').trigger('click');


    expect(mockRouterPush).toHaveBeenCalledWith({
      name: 'search-result',
      params: {
        word: test_word
      }
    });
  });

これで、vue-routerのpushメソッドのテストが

簡単にできました！

関連記事

www.shotoro.com