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
350
なんとなくで書かない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
49
iOSのキーボード入力ビューをカスタマイズする
lemon
0
200
視え方と文字の大きさ
lemon
1
380
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
960
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
500
AI時代のプログラミング教育 / programming education in ai era
kishida
22
20k
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
180
OUPC2024 Day 1 解説
kowerkoint
0
390
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
120
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
740
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
120
プログラミング教育のコスパの話
superkinoko
0
120
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
Return of the Full-Stack Developer
simas
PRO
1
310
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Designing for Performance
lara
606
69k
A Philosophy of Restraint
colly
203
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
490
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The World Runs on Bad Software
bkeepers
PRO
67
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Docker and Python
trallard
44
3.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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の各層の役割をまずは理解しよう - テストはなぜ行うのか明確化することが大切 -
ご静聴ありがとうございました!