We Are JavaScripters! @32nd【初心者歓迎・LT会】の登壇資料です。
なんとなくで書かないReact/ReduxのテストTipsWe Are JavaScripters! @32nd
View Slide
今日話すことFluxアーキテクチャの各層でテストを書く指標を話します- 何を担保したいのか- 重要性の比重
React/Reduxの概要Component ActionReducerStoreMiddlewareContainer
Component3Container4Middleware5Reducer2Action1アジェンダ
2 payload(+meta)1 ActionTypeテスト項目は対応する-ユーザ操作、通信などアプリのインタラクションを全てトリガーしてそれを司る層-Action
ActionActionのテストの重要性は極めて高いと思われる(特にAction Type)処理停止ActionTypeの不一致 =>処理失敗 不正なStoreの混入payloadの不一致 => 後続の orActionのテストが失敗することは即ちアプリのインタラクションが機能していないことを意味する
ReducerアプリのStoreを生成すると共に唯一の更新層-アプリの状態(≒UIの状態)はここに集約される-テスト項目は-2 ActionTypeに対応したStateの更新1 InitialState
Reducer生成できない 不正なStateの混入Stateの不一致 => Viewが 、Viewが更新されないActionTypeの不一致 =>Reducerのテストが失敗するとアプリの状態管理が行えずに正しいViewを返せなくなってしまうテストの重要性は高いと思われる
3 DispatchされるActionの順番2 ロジック1 対応したActionTypeのみキャッチするかテスト項目は-非同期処理や後始末など多岐に渡る用途があるためテストも複雑化しやすい-通信処理などを書くいわゆるビジネスロジック層-Middleware
MiddlewareMiddlewareのテストが失敗することはビジネスロジックの欠陥であり、致命的なバグを引き起こすことにつながるやり方によっては簡素化できる- メインの処理を別の関数やラッパークラスに移譲するなど関数の呼び出しと引数- Middlewareは を確認するのみ重要度は高いが、低くすることもできる
ContainerRedux(Action,Store)とReactをつなぐ層-Reduxに接続してるComponentのテストはContainerのテストも兼ねると言える-値を渡してるだけなのでそもそもテストする必要がないという意見も散見される-テストする必要はない(あっても低い)と思われる
Component3 Stateが正しく更新されているか2 Propsが渡されているか1 Componentがレンダリングされてるかテスト項目はPropsとStateを軸に-ユーザが実際に目にするUIが集まるViewの層-UIの状態や副作用を持つことがある-などが多いと思われる
ComponentスナップショットテストE2E実DOMをテストしたい => 、ユニットテストComponentの振舞い(仮想DOM)をテストしたい =>Props, StateベースのViewのテストで何を担保したいかでテストの仕方から項目は変わってくる重要性は人によってチームによって変わる
React Componentは与えられたPropsを元に描画して仮想DOMを生成するだけ仮想DOM⇔実DOMのテストはReact Fibre側が担うべきテストだとも言えるユニットテストで行うにはオーバーテスティングReact ComponentReact FiberReactVertial DOM DOM
まとめ何を担保したいのか明確化されていないテストは技術負債と同じ-明確化するとテスト項目や文言は定まってくる-React/Reduxの各層の役割をまずは理解しよう-テストはなぜ行うのか明確化することが大切-
ご静聴ありがとうございました!