Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
なんとなくで書かないReact/ReduxのテストTips
camcam_lemon
May 24, 2019
Programming
0
240
なんとなくで書かないReact/ReduxのテストTips
We Are JavaScripters! @32nd【初心者歓迎・LT会】の登壇資料です。
camcam_lemon
May 24, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
77
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
9
4k
UI/UXデザイナーがデザインしてるもの
lemon
2
290
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
820
ESLintで始めるTypeScriptの静的解析
lemon
8
1.5k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.1k
React.lazyとSuspenseで行うLazy Load
lemon
2
320
bundleサイズ2MBの社内サイト大改修譚.pdf
lemon
0
200
反復処理に速さを求めて
lemon
1
130
Other Decks in Programming
See All in Programming
Getting Started With Data Structures
adoranwodo
1
250
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
oniak3ibm
PRO
0
120
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
530
アジャイルで始める データ分析基盤構築
nagano
1
850
ゴーファーくんと辿るプログラミング言語の歴史/history-of-programming-languages-with-gopher
iwasiman
11
4.9k
ちょっとつよい足トラ
logilabo
0
330
動画合成アーキテクチャを実装してみて
satorunooshie
0
530
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
140
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.6k
Haskellでオブジェクト指向プログラミング
koheisakata
0
170
Rust、何もわからない...#3
estie
0
140
クックパッドマートの失敗したデータ設計 Before / After 大放出
mokuzon
20
25k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Design by the Numbers
sachag
271
17k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Practical Orchestrator
shlominoach
178
8.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Documentation Writing (for coders)
carmenintech
48
2.6k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
GraphQLの誤解/rethinking-graphql
sonatard
31
6.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Visualization
eitanlees
125
12k
Transcript
なんとなくで書かない React/ReduxのテストTips We Are JavaScripters! @32nd
None
今日話すこと 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の各層の役割をまずは理解しよう - テストはなぜ行うのか明確化することが大切 -
ご静聴ありがとうございました!