Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

camcam_lemon

May 24, 2019
Tweet

More Decks by camcam_lemon

Other Decks in Programming

Transcript

  1. なんとなくで書かない

    React/ReduxのテストTips
    We Are JavaScripters! @32nd

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Component
    スナップショットテスト
    E2E
    実DOMをテストしたい => 、
    ユニットテスト
    Componentの振舞い(仮想DOM)をテストしたい =>

    Props, Stateベースの
    Viewのテストで何を担保したいかで

    テストの仕方から項目は変わってくる
    重要性は人によってチームによって変わる

    View full-size slide

  14. React Componentは与えられたPropsを元に描画
    して仮想DOMを生成するだけ
    仮想DOM⇔実DOMのテストは

    React Fibre側が担うべきテストだとも言える

    ユニットテストで行うにはオーバーテスティング
    React Component
    React Fiber
    React
    Vertial DOM DOM

    View full-size slide

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

    View full-size slide

  16. ご静聴ありがとうございました!

    View full-size slide