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
Unit Testing For React Component
Search
camcam_lemon
February 22, 2018
Programming
1
84
Unit Testing For React Component
camcam_lemon
February 22, 2018
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
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
590
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
11
3.9k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
540
品質ワークショップをやってみた
nealle
0
500
Introduce Hono CLI
yusukebe
6
2.6k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
280
CSC509 Lecture 06
javiergs
PRO
0
260
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.2k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
460
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Practical Orchestrator
shlominoach
190
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Code Reviewing Like a Champion
maltzj
526
40k
Done Done
chrislema
185
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Become a Pro
speakerdeck
PRO
29
5.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Automating Front-end Workflow
addyosmani
1371
200k
Building an army of robots
kneath
306
46k
Transcript
UNIT TESTING FOR REACT COMPONENTS
Instructions Name @camcam_lemon (甲斐田 亮一) Occupation フロントエンドエンジニア Company 日本事務器株式会社 Hobby
お酒作る(飲む)の大好きマン スノボうまくなりたいマン
Use Testing Tools Testing framework - mocha Coverage - nyc
- istanbul Assertion - power-assert Test helper - jsdom - enzyme - sinon - testdouble.js - fetch-mock
Use Testing Tools Testing framework - mocha Coverage - nyc
- istanbul Assertion - power-assert Test helper - jsdom - enzyme - sinon - testdouble.js - fetch-mock
“ ReactComponentのテスト どうやって書いてますか・・・?
“ refのテストってどう書くんだろ・・・?
“ イベントハンドラは・・・
“ クライアント座標って・・・
公式ページ見ただけじゃ あんまりテスト書けないよ
テストで詰まりそうなポイント ▸ refコールバック ▸ DOMオブジェクトへのアクセス ▸ 引数有りのイベントハンドラ ▸ 時間がからむ処理(setTimeout()) ▸
グローバルオブジェクトへのアクセス ▹ location絡むとたいていイく
refコールバック ▸
[email protected]
からref情報を読み込むよう になった ▸ refが文字列属性かコールバック属性かで テストの仕方が変わる
“
“
このままだとテストは死ぬ
“
DOMオブジェクトへのアクセス ▸ DOMの情報はテスト環境では空のオブジェ クトになっている ▸ getBoundingClientRect()など一部のメソッ ドはmount()でレンダーすれば取得できる (返り値は常に0)
shallowでテストできないんだ・・・ Material-UIラップしてるからmount()できな いよ・・・
“ shallowでもテストできます 値も設定することができる!!
“
“
引数有りのイベントハンドラ ▸ simulate()の第2引数以降にモックオブジェ クトを渡すことができる ▸ instance()から実行することもできる
“
“
ReduxFormのprops inputとmetaオブジェクトを渡すだけ!
“
“
時間がからむ処理 ▸ 時間を上書きしてザ・ワールド ▸ testdouble.jsではtestdouble-timersを使用 してテストする
“
“
グローバルオブジェクトへのアクセス ▸ jsdomのuserAgentやlocation等は直接書き 換えることができない ▸ windowを明示するかどうかでテストの仕方 (と難易度)が変わる ▸ console, userAgent,
locationだけ説明しま す!
console 実行されるけど、確認の方法がわからん!! シェルに出力したくない!!
“
userAgent
None
setterがない・・・!! ないなら作り変えてしまおう!!
“
“
“
location
ただし・・・
元コードの中で location.search = ‘’; location.href = ‘’; が実行されると無事死亡
作り変えることもできない・・・
知っている人いたら 教えてください