Jestテストコードを作成するときに発生する問題!-localStorage

1.発生した問題...😡

これは私がYouTube教室の任務で出会った問題です...
テストコードを作成し、機能を実装...進行中です!
jestでタスクで使用するlocalStorage、fetchコードをテストした場合...
いいね...!

ReferenceErrorコードを表示すると、localStorageが定義されていないことがわかります.
localStorageなしでは...定義がないとは…?!🤯

2.解決のために…😵‍💫

まず、以前jestとcypressを併用していたとき、エラーが発生したときに閲覧した資料の中で、jestは仮想のjSDOMを使ってtestコードをチェックすると言いました…!
だからjestはノード環境で働いている友達です...Windows API localStorageが見つかりません.
localStorageを笑う方法はありますか…?瞑想を経て、

npmにjest localStorage-mockというパッケージが見えます!
npmの正式なドキュメントで簡単に説明します.

jestをdevDependencyに設定します.

npm install -D jest-localStorage-mock

package.jsonファイルにjest構成領域を作成し、setupFilesとresetMocksを設定します.

{
  "jest": {
    "resetMocks": false,
    "setupFiles": ["jest-localStorage-mock"]
  }
}

キラキラ!
思ったより簡単!
[その他](More)に設定すると、エラーが発生します.
次のコマンドは端末で実行すると正常に動作します!

npx jest

3.正常な動作!!😎

こつこつ!

ああ!また、fetchを使用する場合も同じエラーが発生します.
解決策はいろいろあります.
Jest-fetch-mockも!存在を知っていれば役に立つはず!
グーグルをすると見つけやすい問題です.localStorageで困っている人がこの記事を見て問題を解決してくれるといいですね!!
参考資料:jest-localstorage-mock