どっちも 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 か実際のブラウザで一通りの画面遷移ができてればそれでいいと思う

Jest を実行したら⇩のエラーが

Support for the experimental syntax XXX isn't currently enabled

XXX のところに構文の種類が入ってます

Jest で実行するときにはコードが Babel で変換されてて Babel にデフォルトで組み込まれてないものは使えないみたい
使うには Babel の設定書いて plugins の追加が必要だとか
webpack でも acorn で認識できないコードを出力できない問題あったし 必要ない処理通されて新機能が使えないこと多め

別に TypeScript も JSX も使ってない ただの JavaScript なので変換なんていらないのに！
変換無しで jest 使えないのか調べたら transform に {} を指定すればいいと書いた issue があったのでやってみたら無事成功

// jest.config.js
module.exports = {
	transform: {}
}

デフォが変換ありなのは親切なのか不親切なのか