やりたいこと
localStorageのテストをjestでしたかったのですが、
jest初心者で忘れそうなのでメモ的に残しておこうと思います。
コード
js(react)
実際のコードを書いていきます。(簡単に)
雑に書いてるのでミスがあったらすみません。
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
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は該当の関数が実行された際の引数を返します。
まとめ
曖昧な部分が多く、間違っている部分があるかもしれないのでもし違う場合は教えてください。