なんとなくで書かないReact/ReduxのテストTips

なんとなくで書かない React/ReduxのテストTips We Are JavaScripters! @32nd

今日話すこと Fluxアーキテクチャの各層でテストを書く指標を話します - 何を担保したいのか - 重要性の比重

React/Reduxの概要 Component Action Reducer Store Middleware Container

Component 3 Container 4 Middleware 5 Reducer 2 Action 1
アジェンダ

2 payload(+meta) 1 ActionType テスト項目は対応する - ユーザ操作、通信などアプリのインタラクションを全てトリガーしてそれを司る層 - Action

Action Actionのテストの重要性は極めて高いと思われる（特にAction Type）処理停止 ActionTypeの不一致 => 処理失敗不正なStoreの混入 payloadの不一致
=> 後続の or Actionのテストが失敗することは即ちアプリのインタラクションが機能していないことを意味する

Reducer アプリのStoreを生成すると共に唯一の更新層 - アプリの状態（≒UIの状態）はここに集約される - テスト項目は - 2 ActionTypeに対応したStateの更新 1
InitialState

Reducer 生成できない不正なStateの混入 Stateの不一致 => Viewが、 Viewが更新されない ActionTypeの不一致 =>
Reducerのテストが失敗するとアプリの状態管理が行えずに正しいViewを返せなくなってしまうテストの重要性は高いと思われる

3 DispatchされるActionの順番 2 ロジック 1 対応したActionTypeのみキャッチするかテスト項目は - 非同期処理や後始末など多岐に渡る用途があるためテストも複雑化しやすい
- 通信処理などを書くいわゆるビジネスロジック層 - Middleware

Middleware Middlewareのテストが失敗することはビジネスロジックの欠陥であり、致命的なバグを引き起こすことにつながるやり方によっては簡素化できる - メインの処理を別の関数やラッパークラスに移譲するなど関数の呼び出しと引数 - Middlewareは
を確認するのみ重要度は高いが、低くすることもできる

Container Redux(Action,Store)とReactをつなぐ層 - Reduxに接続してるComponentのテストは Containerのテストも兼ねると言える - 値を渡してるだけなのでそもそもテストする必要がないという意見も散見される - テストする必要はない(あっても低い)と思われる

Component 3 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 Component React
Fiber React Vertial DOM DOM

まとめ何を担保したいのか明確化されていないテストは技術負債と同じ - 明確化するとテスト項目や文言は定まってくる - React/Reduxの各層の役割をまずは理解しよう - テストはなぜ行うのか明確化することが大切 -

ご静聴ありがとうございました！

なんとなくで書かないReact/ReduxのテストTips

なんとなくで書かないReact/ReduxのテストTips

camcam_lemon

More Decks by camcam_lemon

Other Decks in Programming

Featured

Transcript