やりたいこと

localStorageのテストをjestでしたかったのですが、
jest初心者で忘れそうなのでメモ的に残しておこうと思います。

コード

js(react)

実際のコードを書いていきます。(簡単に)
雑に書いてるのでミスがあったらすみません。

.jsx

export const sample = () => {
  const ini = {};
  const [sampleData, setSampleData] = useState(ini);
  useEffect(() => {
    const getItem = localStorage.getItem('item');

    if (!getItem) {
      const sampleText = "sampleです";
      localStorage.setItem('item', sampleText);
      setSampleData(sampleText);
    } else {
      setSampleData(getItem);
    }
  }, []);
}

jest

.js

import {renderHook } from '@testing-library/react-hooks';
import sample from "./" // 上記のファイルを呼び出し

describe("ここに任意のテスト名", () => {
  test.each([[''], ['item']])("ここにテストの内容", (item) => {
    const spySet = jest.spyOn(Storage.prototype, "setItem");
    const spyGet = item ? jest.spyOn(Storage.prototype, "getItem").mockReturnValue(item) : '';

    const { result } = renderHook(() => sample());
    if (item) {
      expect(spyGet).toHaveBeenCalledTimes(1);
      expect(spyGet).toBeCalledWith("item");
    } else {
      expect(spySet).toHaveBeenCalledTimes(1);
      expect(spySet).toBeCalledWith("item", "sample");
    }
  });
});

解説

上記のコードで何をやっているか簡単に解説させてください。
まず、localStorage.getItemで該当のkeyを持ったstorageが存在するかを確認し、
あったらstateに値を保存。(値はlcoalStorage.getItemの値)
なければ、setItemし、stateを更新というだけのことをしています。

jestの方の解説ですが、
上から順に説明します。

each

eachは設定した配列の分だけテストを実行してくれます。
以下は3回testを回します。

.each([
[1],[2],[3]
])

こちらの値を参照するときは、test("", Fn)の引数に設定することで参照することができます。

spyOn

関数のモック化をします。
spyOnの第一引数に該当のオブジェクト、第二の引数にメソッドを指定することで該当の関数を
モック化できます。

mockReturnValue

モック.mockReturnValue('test');
とするとモックが実行された際の戻り値がmockReturnValueに設定された引数になります。

renderHook

カスタムフックを呼ぶための関数で、今回の場合だとuseEffectの実行です。

toHaveBeenCalledTimes

toHaveBeenCalledTimesは該当の関数が何回呼ばれたかを返します。

toBeCalledWith

toBeCalledWithは該当の関数が実行された際の引数を返します。

まとめ

曖昧な部分が多く、間違っている部分があるかもしれないのでもし違う場合は教えてください。