😎

vue test Error: Not implemented: navigation の解消方法

2021/01/12に公開

背景

コンポーネントのメソッドの中にwindow.location.hrefがあり、該当メソッドをテストしようとしたら下記のエラーが出てきてしまいます。

スクショ:

一応テスト自体はパスできますが、エラーが出てくるなんとか解消したいのは人の性ですよねー

コンポーネントのコード

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

... 中略

methods: {
    executeSearch() {
      // コンポーネントのメソッドはwindow.locationがあるとテストしたらエラーが出てきます。
      window.location.href = 'https://google.com';
    },
  },

テストコード:

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

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

test('はリンクのクリックイベントが正しく発火できる', () => {
    const link = wrapper.find('a');
    link.trigger('click');
    expect(spyExecuteSearch).toHaveBeenCalled();
  });

対策

色々と調べましたが、下記の方法で解消しました。
triggerでクリックイベントを発火する前に下記の処理が必要です。

  1. window.location用のモック関数を作成
  2. window.locationのデフォルト値を削除
  3. モック関数をwindow.locationにアサイン

コード:

test('はリンクのクリックイベントが正しく発火できる', () => {
    // モック関数作成
    const assignMock = jest.fn();
    // デフォルト値を削除
    delete window.location;
    // モック関数をアサイン
    window.location = { assign: assignMock };
    afterEach(() => {
      assignMock.mockClear();
    });

    const link = wrapper.find('a');
    link.trigger('click');

    expect(spyExecuteSearch).toHaveBeenCalled();
  });

以上のコードで該当エラーを解消できました!

おわりに

今回の記事はこちらを参考させて頂きました。
記事1
記事2

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

Discussion