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

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

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

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

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

May 24, 2019
Tweet

More Decks by camcam_lemon

Other Decks in Programming

Transcript

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

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

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

  5. Component 3 Container 4 Middleware 5 Reducer 2 Action 1

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

  7. Action Actionのテストの重要性は極めて高いと 思われる(特にAction Type) 処理停止 ActionTypeの不一致 => 処理失敗 不正なStoreの混入 payloadの不一致

    => 後続の or Actionのテストが失敗することは即ちアプリのイ ンタラクションが機能していないことを意味する
  8. Reducer アプリのStoreを生成すると共に唯一の更新層 - アプリの状態(≒UIの状態)はここに集約される - テスト項目は - 2 ActionTypeに対応したStateの更新 1

    InitialState
  9. Reducer 生成できない 不正なStateの混入 Stateの不一致 => Viewが 、 Viewが更新されない ActionTypeの不一致 =>

    Reducerのテストが失敗するとアプリの状態管理 が行えずに正しいViewを返せなくなってしまう テストの重要性は高いと思われる
  10. 3 DispatchされるActionの順番 2 ロジック 1 対応したActionTypeのみキャッチするか テスト項目は - 非同期処理や後始末など多岐に渡る用途がある ためテストも複雑化しやすい

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

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

  13. Component 3 Stateが正しく更新されているか 2 Propsが渡されているか 1 Componentがレンダリングされてるか テスト項目はPropsとStateを軸に - ユーザが実際に目にするUIが集まるViewの層

    - UIの状態や副作用を持つことがある - などが多いと思われる
  14. Component スナップショットテスト E2E 実DOMをテストしたい => 、 ユニットテスト Componentの振舞い(仮想DOM)をテストしたい => Props,

    Stateベースの Viewのテストで何を担保したいかで テストの仕方から項目は変わってくる 重要性は人によってチームによって変わる
  15. React Componentは与えられたPropsを元に描画 して仮想DOMを生成するだけ 仮想DOM⇔実DOMのテストは React Fibre側が担うべきテストだとも言える ユニットテストで行うにはオーバーテスティング React Component React

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

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