Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
なんとなくで書かないReact/ReduxのテストTips
Search
camcam_lemon
May 24, 2019
Programming
0
370
なんとなくで書かない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
要素のサイズを変えずに押しやすくする
lemon
0
57
iOSのキーボード入力ビューをカスタマイズする
lemon
0
230
視え方と文字の大きさ
lemon
1
380
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
270
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
970
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.1k
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
220
從零到一:搭建你的第一個 Observability 平台
blueswen
0
150
ワンバイナリWebサービスのススメ
mackee
10
7.4k
がんばりすぎないコーディングルール運用術
tsukakei
1
180
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
人には人それぞれのサービス層がある
shimabox
3
450
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
Blueskyのプラグインを作ってみた
hakkadaikon
1
270
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
570
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building an army of robots
kneath
306
45k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Thoughts on Productivity
jonyablonski
69
4.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Scaling GitHub
holman
459
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
How to train your dragon (web standard)
notwaldorf
92
6k
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の各層の役割をまずは理解しよう - テストはなぜ行うのか明確化することが大切 -
ご静聴ありがとうございました!