😎
vue test Error: Not implemented: navigation の解消方法
背景
コンポーネントのメソッドの中に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でクリックイベントを発火する前に下記の処理が必要です。
- window.location用のモック関数を作成
- window.locationのデフォルト値を削除
- モック関数を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();
});
以上のコードで該当エラーを解消できました!
おわりに
最後まで見てくださってありがとうございました。
Discussion