役割が大きなコンポーネントでReact Testing Libraryが上手く動いてないように見える時に見るメモ

課題

大きなコンポーネントはHTMLの量が多いのでエラーが出た時に
該当の場所のHTMLまで出力されない。

やったこと

1. コンポーネント側のデバッグしたい要素に data-hogeをつける
2. html出力用のログを追加
3. HTMLの出力の確認とテストの比較

setTimeout(() => {
　　console.log(document.querySelector('[data-hoge]')?.outerHTML);
}, 3000);