【雑メモ】ReactでUI上見えている要素がHTML上では存在しない謎現象

状況

React testing library + JESTでユニットテストを書いていたところ，ある項目がgetByTestIdで取得できなかった． よくよくページをインスペクタで見てみると，UI上は表示されているdivが，HTML上では表示されていないという現象が起こっていた．

本来MUIBOX-root-450の内部には3つのdevがある(UI上にも表示されている)が，インスペクタでは表示されない

原因

3つ目のdiv(Box)は以下のようにアロー形式の即時実行関数(IIFE)で条件分岐していたが，記法が間違っていた．

Before

< Box textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden" data-testid="baseform-posted">
{() => {
    if (props.videoInfo.posted == null) {
         return "";
     }
      return props.videoInfo.posted.toLocaleString();
   }}
</Box>

正しくはこちら

After

< Box textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden" data-testid="baseform-posted">
{(() => {
    if (props.videoInfo.posted == null) {
         return "";
     }
      return props.videoInfo.posted.toLocaleString();
   })()}
</Box>

アロー形式の即時実行関数全体を()で囲み，その後の()で実行する必要があった． これによりdivの数が見た目通り3つ表示されるようになった．

UIの見た目通り3つのdivが表示されている．

メモ

おそらくBeforeの状態は関数定義しかしていない状態のため，renderの際に何らかの形で(しかもインスペクタがハンドリングするより後に)呼び出されたのではないかと推測している．

なおJSX内部で即時関数を呼ぶのはパフォーマンス的に良くないが，大抵そこまで気にするほどではない，との噂．
(下記リンクの"Nested ternary operator"の章にて)．

5 common practices that you can stop doing in React - LogRocket Blog