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

We Are JavaScripters! @32nd【初心者歓迎・LT会】の登壇資料です。

Transcript

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

   View Slide

2. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Component
    3 Stateが正しく更新されているか
    2 Propsが渡されているか
    1 Componentがレンダリングされてるか
    テスト項目はPropsとStateを軸に
    -
    ユーザが実際に目にするUIが集まるViewの層
    -
    UIの状態や副作用を持つことがある
    -
    などが多いと思われる
    

    View Slide

14. Component
    スナップショットテスト
    E2E
    実DOMをテストしたい => 、
    ユニットテスト
    Componentの振舞い(仮想DOM)をテストしたい =>
    
    Props, Stateベースの
    Viewのテストで何を担保したいかで
    
    テストの仕方から項目は変わってくる
    重要性は人によってチームによって変わる
    

    View Slide

15. React Componentは与えられたPropsを元に描画
    して仮想DOMを生成するだけ
    仮想DOM⇔実DOMのテストは
    
    React Fibre側が担うべきテストだとも言える
    
    ユニットテストで行うにはオーバーテスティング
    React Component
    React Fiber
    React
    Vertial DOM DOM
    

    View Slide

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

    View Slide

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

    View Slide