どっちも Facebook 製だし Jest は React のテストにも向いてるというから使ってみた
けどあんまり使いやすくなかった
Jest 自体に React のレンダリング機能はなし
別ライブラリが必要
○ React Renderer
○ Testing Library
○ Enzyme
など
React Renderer が公式
とりあえずこれを使ったけどそこまで便利というほどでもなかった
Testing Libraryとかのほうがいいかも
○ useState の更新は面倒
useState を mock 化して 返り値の setXXX を保持して それを呼び出し順から推測して取得して呼び出したり
もっと便利できる機能があるのを期待してたのに
○ shallow render が必要になる
普通に render すると子コンポーネントも render される
色々と処理がされすぎる
テスト用環境だと動かない部分の mock 化が面倒すぎる
shallow render だと子コンポーネントは render されない
関数ならコンポーネントの返り値 クラスコンポーネントなら redner メソッドの返り値を受け取れる
それなら直接関数呼び出しや インスタンス作って render 呼び出しでもいいような?
とも思ったけど それだと useMemo や useRef みたいなフックで問題出るかも
○ useEffect の実行
useEffect が実行されると 処理が複雑なコンポーネントでつらい
useEffect は無効にして useEffect の処理内で state が変わった結果の 仮想 DOM 構造のチェックだけしたい
かと言って useEffect で何もしないようにすると問題が起きる
useEffect の置き換えは全コンポーネントに影響するから 子コンポーネントでも useEffect が実行されない
ライブラリでは useEffect の処理で props.children を仮想 DOM に追加することがある
useEffect が実行されないと仮想 DOM 内は空で必要な要素が結果に含まれてない
特定モジュールからの require/import だけ mock できたらいいけどそれらしいのはなさそう
○ shallow renderer だと仮想 DOM 内の検索とかができない
取得できるものは JSX で作る部分の生のオブジェクト
querySelector 的な便利機能はついてない
子要素や N 番目という場所を固定で自力で取り出して確認することになる
固定の場所の props の onClick などを取り出して 関数呼び出しでボタン押された扱いにして……
ってちょっと不便すぎ
要素の追加や順番の置き換えだけで動かなくなる
○ そこまでしてのやる必要性
React のコンポーネントをテストしようとすると その他モジュールのテストに比べて mock しないといけないのが多い
ほとんどのコンポーネントってロジック的に複雑というわけでもなくテストしておきたい感はあんまりない
基本的に 機能は別モジュールに分けてるし コンポーネントのテストは React などのライブラリ使う前と同じくそこまでしなくてもいい感じがする
ロジック部分がモジュールに分かれていて そっちがテスト済みなら DOM 周りはもっとゆるいのでいい
特定文字が含むかどうかの確認だけとか
React でのテストをしないで 通常の DOM として jsdom か実際のブラウザで一通りの画面遷移ができてればそれでいいと思う