Unit Testing For React Component

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

“ 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

setterがない・・・！！ないなら作り変えてしまおう！！

location

ただし・・・

元コードの中で location.search = ‘’; location.href = ‘’; が実行されると無事死亡

作り変えることもできない・・・

知っている人いたら　　教えてください

Unit Testing For React Component

Unit Testing For React Component

More Decks by camcam_lemon

Other Decks in Programming

Featured

Transcript