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
要素のサイズを変えずに押しやすくする
lemon
0
75
iOSのキーボード入力ビューをカスタマイズする
lemon
0
260
視え方と文字の大きさ
lemon
1
410
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
290
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
5k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
1k
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
Other Decks in Programming
See All in Programming
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
690
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
240
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
600
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
460
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
220
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
180
品質ワークショップをやってみた
nealle
0
550
All About Angular's New Signal Forms
manfredsteyer
PRO
0
190
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
RailsConf 2023
tenderlove
30
1.3k
Designing for Performance
lara
610
69k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
Being A Developer After 40
akosma
91
590k
Scaling GitHub
holman
463
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Raft: Consensus for Rubyists
vanstee
140
7.1k
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の各層の役割をまずは理解しよう - テストはなぜ行うのか明確化することが大切 -
ご静聴ありがとうございました!