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
81
Unit Testing For React Component
camcam_lemon
February 22, 2018
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
41
iOSのキーボード入力ビューをカスタマイズする
lemon
0
190
視え方と文字の大きさ
lemon
1
370
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.8k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
950
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
Better Code Design in PHP
afilina
0
170
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
960
Rubyと自由とAIと
yotii23
6
1.7k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
Rails アプリ地図考 Flush Cut
makicamel
1
130
PEPCは何を変えようとしていたのか
ken7253
2
220
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
150
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
890
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
380
Featured
See All Featured
A better future with KSS
kneath
238
17k
It's Worth the Effort
3n
184
28k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Bash Introduction
62gerente
611
210k
Building Your Own Lightsaber
phodgson
104
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Site-Speed That Sticks
csswizardry
4
410
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コールバック ▸ enzyme@3.0.0から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 = ‘’; が実行されると無事死亡
作り変えることもできない・・・
知っている人いたら 教えてください