Reactのアプリをブラウザで確認した際にブラウザは思った通りの挙動をしたのですがテストだけFATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memoryと出てしまったときのデバック記録です。
結論から言いますとuseEffectの第二引数の[]をつけ忘れたことに起因するエラーでした。
試してみたこと１
Dockerのメモリを増やしてみました。
- なぜやったか
エラー文内にheap out of memoryとあるので素直にメモリ不足と仮定してメモリを増やした。
今思うと、メモリが足りないではなくメモリをたくさん食いすぎてるロジックを仮定するべきであったと思う。
試してみたこと２
テストケースを減らして、一つ一つのテストケースでエラーを起こすか確認
- なぜやったか
どのテストケースが失敗の要因か確認するため
結果
1ケースの場合はどのケースでも成功する。複数ケースの場合は必ず上記のエラーになるとわかった。
ここで改めて使っている関数のDocumentを読む
ここで、useEffectの引数は２つなのに一つしか指定していないことに気が付く。Reactの公式DocumentのuseEffectでは
デフォルトでは副作用関数はレンダーが終了した後に毎回動作しますが、特定の値が変化した時のみ動作させるようにすることもできます。
とあります。つまり値が変化する度にuesEffect関数が呼び出される状態になっていたのです。
しかしながら、無限ループを抑制する機能（？）がブラウザにはついていたので一見ブラウザではうまく動いているように見えていたというわけです。
こういうことが起きないためにすること
Linterを入れましょう
これにつきます。異論は認めすが「現代においてLinterを入れないのはただの怠慢でぶっちゃけダサいだけです。」
見たことがないエラーが出たら、変なSyntaxエラーであるケースが多いと思います。使ってる関数の引数の数が足りているかなどを重点的に確認していくといいでしょう。
あと、困ったときは人にペアプロやコードレビューを頼むと、違う視点からの意見をもらえ早く解決することができることが多い印象があります。