ReactのUTのポイント
- Reactのコンポーネントは、ほとんどが状態を持たないfunctionalコンポーネントとなっていて、引数で受け取ったデータに対しては毎回同じビューが返される。従って、まずはコンポーネントが正しいデータをレンダリングしているかをテストすることが大事。
- コンポーネントは、上記のような特徴を持っていることから、基本的には入力のデータと出力のデータだけを気にすれば良いので、テストが容易。
- コンポーネントは、データを出力するだけのものではないので、必要に応じてインタラクションのテストも書く。
ReactのUTに必要なツール
この2つが定番
- Jest（テスティングフレームワーク） ※Jasmineなど他のフレームワークでも可
- enzyme（テストユーティリティ）
各ツールの連携用
- jest-enzyme
- enzyme-adapter-react-16
Jestのスナップショットを行う場合は必要
- react-test-renderer
※ create-react-appを使う場合は、Jestがデフォルトで使えるようになっている。特にBabelなどの設定を行う必要はない。enzymeを使う場合は、別途インストールが必要。
Jestについて
- Jasmineをベースに作られたテスティングフレームワーク。マッチャがほぼ同じ。Facebook製だが、Reactのためのものではない。
- Node.js上のjsdomで実行されるので、コマンドベースでテストが行える。Karmaのようなテストランナーは必要ない。
- テストダブル、スナップショットテストに対応。
- 公式ドキュメントは完全日本語対応。
enzymeについて
- Facebookも認めるテストユーティリティ。airbnb製。ReactのUTの記述を簡単にしてくれるもの。
- コンポーネントをshallow（浅い）レンダリングしてくれる（紐づいた子コンポーネントを無視してテストできる）。もちろんフルレンダリングでのテストもできる。
- jQueryライクなセレクタが最強。jsxへのアクセスが楽になる。
補足
サンプル
https://github.com/maechabin/enzyme-sample
詳細をブログにまとめました
https://mae.chab.in/archives/60066