Unit Testing For React Component

Slide 1

Slide 1 text

UNIT TESTING FOR REACT COMPONENTS

Slide 2

Slide 2 text

Instructions Name @camcam_lemon (甲斐田亮一) Occupation フロントエンドエンジニア Company 日本事務器株式会社 Hobby お酒作る(飲む)の大好きマンスノボうまくなりたいマン

Slide 3

Slide 3 text

Use Testing Tools Testing framework - mocha Coverage - nyc - istanbul Assertion - power-assert Test helper - jsdom - enzyme - sinon - testdouble.js - fetch-mock

Slide 4

Slide 4 text

Use Testing Tools Testing framework - mocha Coverage - nyc - istanbul Assertion - power-assert Test helper - jsdom - enzyme - sinon - testdouble.js - fetch-mock

Slide 5

Slide 5 text

“ ReactComponentのテストどうやって書いてますか・・・？

Slide 6

Slide 6 text

“ refのテストってどう書くんだろ・・・？

Slide 7

Slide 7 text

“ イベントハンドラは・・・

Slide 8

Slide 8 text

“ クライアント座標って・・・

Slide 9

Slide 9 text

公式ページ見ただけじゃあんまりテスト書けないよ

Slide 10

Slide 10 text

テストで詰まりそうなポイント ▸ refコールバック ▸ DOMオブジェクトへのアクセス ▸ 引数有りのイベントハンドラ ▸ 時間がからむ処理(setTimeout()) ▸ グローバルオブジェクトへのアクセス ▹ location絡むとたいていイく

Slide 11

Slide 11 text

refコールバック ▸ enzyme@3.0.0からref情報を読み込むようになった ▸ refが文字列属性かコールバック属性かでテストの仕方が変わる

Slide 12

Slide 12 text

“

Slide 13

Slide 13 text

“

Slide 14

Slide 14 text

このままだとテストは死ぬ

Slide 15

Slide 15 text

“

Slide 16

Slide 16 text

DOMオブジェクトへのアクセス ▸ DOMの情報はテスト環境では空のオブジェクトになっている ▸ getBoundingClientRect()など一部のメソッドはmount()でレンダーすれば取得できる (返り値は常に0)

Slide 17

Slide 17 text

shallowでテストできないんだ・・・ Material-UIラップしてるからmount()できないよ・・・

Slide 18

Slide 18 text

“ shallowでもテストできます値も設定することができる!!

Slide 19

Slide 19 text

“

Slide 20

Slide 20 text

“

Slide 21

Slide 21 text

引数有りのイベントハンドラ ▸ simulate()の第2引数以降にモックオブジェクトを渡すことができる ▸ instance()から実行することもできる

Slide 22

Slide 22 text

“

Slide 23

Slide 23 text

“

Slide 24

Slide 24 text

ReduxFormのprops inputとmetaオブジェクトを渡すだけ！

Slide 25

Slide 25 text

“

Slide 26

Slide 26 text

“

Slide 27

Slide 27 text

時間がからむ処理 ▸ 時間を上書きしてザ・ワールド ▸ testdouble.jsではtestdouble-timersを使用してテストする

Slide 28

Slide 28 text

“

Slide 29

Slide 29 text

“

Slide 30

Slide 30 text

グローバルオブジェクトへのアクセス ▸ jsdomのuserAgentやlocation等は直接書き換えることができない ▸ windowを明示するかどうかでテストの仕方（と難易度）が変わる ▸ console, userAgent, locationだけ説明します！

Slide 31

Slide 31 text

console 実行されるけど、確認の方法がわからん!! シェルに出力したくない!!

Slide 32

Slide 32 text

“

Slide 33

Slide 33 text

userAgent

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

“

Slide 37

Slide 37 text

“

Slide 38

Slide 38 text

“

Slide 39

Slide 39 text

location

Slide 40

Slide 40 text

ただし・・・

Slide 41

Slide 41 text

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