React Hooksでのテストはどんな感じになるのか調査報告

自己紹介

発表内容

• Reactコンポーネントのテストとはなにをするのか
   
• ツールの紹介(official, jest)
  ※シンプルな使い方を紹介、enzyme, react-testing-libraryは登場しません
   
• Hooksを使う場合どうすれば良い？

Reactコンポーネントの
何をテストするのか

• レンダリング結果
  手軽。実際に手元で描画し、内容が正しければその状態を書き出しておいてテスト時に比較する。
   
• コンポーネント内のイベント実行後の結果
  どこまでやるか次第。例えば、ボタン押下後のテキスト変更など。

ツールの紹介

• 公式編
  https://reactjs.org/docs/test-renderer.html
• Jestのsnapshot機能
  https://jestjs.io/docs/ja/tutorial-react

Hooksを使う場合は？

• 余り特殊なことはしなくてよさそう
• useState()がコンポーネント内で使われていた場合
  単に初期値でレンダリングされた結果を扱えばよい
• useEffect()がコンポーネント内で使われていた場合
  中で使う非同期処理の関数をmockするなどして対応すればよい

Thank you