👏

どう使う??jestでlocalStorageを使う方法

2024/09/02に公開

MERN スタックでアプリを作っている際、ログイン機能の実装時に localStorage を使いました。

jwt の検証のために loalStorage を使ったのですが、jest でテストコードを書いているとき、localStrage を使うために事前設定が必要だったので記録しておきます。

コード


var localStorageMock = (function() {
    let store = {};

    return {
        getItem: function(key) {
            return store[key] || null;
        },
        setItem: function(key, value) {
            store[key] = String(value);
        },
        clear: function() {
            store = {};
        }
    };

  })();

  Object.defineProperty(window, 'localStorage', {
     value: localStorageMock
  });

上記のファイルを好きな場所に作成し、package.json にて、

"jest": {
    "setupFiles": [
      "./browserMocks.js"
    ],
    "testURL": "サーバーのURL"
  },

と記述してみてください!(browserMock.json のパスも自分の状況に合わせてみてください)

// データのセット
localStorage.setItem("<キー>", <値>);
// データの参照
localStorage.setItem("<キー>", <値>);

Discussion