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コールバック ▸ [email protected]から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 = ‘’; が実行されると無事死亡

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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