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