JestでLocalStorageのモックテストを行う際の問題解決

課題

JavaScriptのテストフレームワークであるJestを使用してLocalStorageの処理のテストを実施しようとしたところ、下記のようなエラーが出てうまくいかない。

エラー１：
TypeError: jest.spyOn(...).mockImplementation is not a function
エラー２：
SecurityError: localStorage is not available for opaque origins

解決方法

• jest-environment-jsdomをインストール、設定
• LocalStorageのメソッドを直接spyするのではなく、Storage.prototypeをspyする

詳しい手順・実装内容

以下の実装により問題を解決しました：

まず、LocalStorageのメソッドを直接spyするのではなく、Storage.prototypeをspyする方法に切り替えました。
これにより、TypeError: jest.spyOn(...).mockImplementation is not a functionというエラーが解消しました。

jest.spyOn(Storage.prototype, "setItem").mockImplementation(jest.fn());
jest.spyOn(Storage.prototype, "getItem").mockImplementation((key) => {
  return mock_value;
});

expect(Storage.prototype.setItem).toHaveBeenCalledWith(
  "mock_key",
  "mock_value"
);

次に、"SecurityError: localStorage is not available for opaque origins"ですが、ググってみると設定ファイルにtestURLを指定すれば解決するという記事を見つけましたが、testURLを指定するとワーニングが出てうまくいきませんでした（Jestのバージョンは29.6.1）

Deprecation Warning:
Option "testURL" was replaced by passing the URL via "testEnvironmentOptions.url".
Please update your configuration.

色々調べた結果、jest-environment-jsdomを使うことで解決ができました。

まず、インストール

npm i jest-environment-jsdom

その後、jestの設定ファイルに下記を設定

module.exports = {
  testEnvironment: "jsdom",
};

これで先のテストコードと合わせて無事にテストを実施することができました。