Unit Testing For React Component

Transcript

1. UNIT TESTING FOR REACT COMPONENTS
2. Instructions Name @camcam_lemon (甲斐田 亮一) Occupation フロントエンドエンジニア Company 日本事務器株式会社 Hobby お酒作る(飲む)の大好きマン スノボうまくなりたいマン
3. Use Testing Tools Testing framework - mocha Coverage - nyc - istanbul Assertion - power-assert Test helper - jsdom - enzyme - sinon - testdouble.js - fetch-mock
4. Use Testing Tools Testing framework - mocha Coverage - nyc - istanbul Assertion - power-assert Test helper - jsdom - enzyme - sinon - testdouble.js - fetch-mock
5. “ ReactComponentのテスト どうやって書いてますか・・・？
6. “ refのテストってどう書くんだろ・・・？
7. “ イベントハンドラは・・・
8. “ クライアント座標って・・・
9. 公式ページ見ただけじゃ あんまりテスト書けないよ
10. テストで詰まりそうなポイント ▸ refコールバック ▸ DOMオブジェクトへのアクセス ▸ 引数有りのイベントハンドラ ▸ 時間がからむ処理(setTimeout()) ▸ グローバルオブジェクトへのアクセス ▹ location絡むとたいていイく
11. refコールバック ▸ enzyme@3.0.0からref情報を読み込むよう になった ▸ refが文字列属性かコールバック属性かで テストの仕方が変わる
12. “
13. “
14. このままだとテストは死ぬ
15. “
16. DOMオブジェクトへのアクセス ▸ DOMの情報はテスト環境では空のオブジェ クトになっている ▸ getBoundingClientRect()など一部のメソッ ドはmount()でレンダーすれば取得できる (返り値は常に0)
17. shallowでテストできないんだ・・・ Material-UIラップしてるからmount()できな いよ・・・
18. “ shallowでもテストできます 値も設定することができる!!
19. “
20. “
21. 引数有りのイベントハンドラ ▸ simulate()の第2引数以降にモックオブジェ クトを渡すことができる ▸ instance()から実行することもできる
22. “
23. “
24. ReduxFormのprops inputとmetaオブジェクトを渡すだけ！
25. “
26. “
27. 時間がからむ処理 ▸ 時間を上書きしてザ・ワールド ▸ testdouble.jsではtestdouble-timersを使用 してテストする
28. “
29. “
30. グローバルオブジェクトへのアクセス ▸ jsdomのuserAgentやlocation等は直接書き 換えることができない ▸ windowを明示するかどうかでテストの仕方 （と難易度）が変わる ▸ console, userAgent, locationだけ説明しま す！
31. console 実行されるけど、確認の方法がわからん!! シェルに出力したくない!!
32. “
33. userAgent
35. setterがない・・・！！ ないなら作り変えてしまおう！！
36. “
37. “
38. “
39. location
40. ただし・・・
41. 元コードの中で location.search = ‘’; location.href = ‘’; が実行されると無事死亡
42. 作り変えることもできない・・・
43. 知っている人いたら 　　教えてください