React | 用十分鐘對自定義 Hooks 寫個測試
Hi！大家好，我是神 Q 超人。我是個滿常回頭檢視自己文章的人，像是有時候想看看自己寫了什麼、碰到類似的問題、用來睡前助眠 😂。但有天晚上我讀著「JavaScript | 關於 Object ，一口氣全說完」沈浸在自己回憶裡時
忽然就天亮了！
我嚇到把床整個翻過去，接著打開「Gatsby | 不是木村拓哉也能玩轉 Gatsby — feat. GitHub Pages」和「Side Project 從無到有-Medium 轉 Markdown feat. NodeJS」，我又再把床翻回來，然後坐下來開始思考，
這些文章內容為什麼會那麼長？
在這個時間就是金錢、寸金難買寸光陰的時代，以前的我怎麼會不懂珍惜讀者的時間？這樣以後大家會不會看到神 Q 超人發表了新文章就開始害怕，害怕早上起床看完文章，早餐店就打烊，沒辦法享受又營養又好吃的早餐，開始完美的一天。
所以當下那個清晨我用力地懺悔，然後下定決心開始寫十分鐘系列，讓大家不會再錯過美好的早晨 🙌
哦對，然後其實這邊開始才是重點 😂，抱歉我控制不了自己手打一堆幹話。這篇文章想用一點點時間分享，如何對 React 中的自定義 Hooks 寫下測試呢？一起看看吧！
自定義 Hooks（useHooks）
在測試之前我們要先擁有一個 useHooks，那如果各位不曉得 useHooks 能做到什麼事的話，還是先建議閱讀 React 的官方文件，這樣再來看這篇文章會比較容易有參與感，但是如果各位不想讀的話，也可以像我或是薩諾斯戴上無限手套用一個彈指 💥
就出來了！這個 useHooks 主要是把「計數」的邏輯包成一個 Hooks，最後回傳的是目前的計數值 count 和把 count 加上指定數值的 method，這麼一來我就可以把這個 useHooks 用在各個需要計數的 Component 中，而且每個 Component 又可以各自指定 count 的初始值和被加數。簡單說就是把邏輯從 Component 用 Hooks 切出來！就可以像這樣用它：
測試自定義 Hooks（Test useHooks）
事前準備 Prepare
接下來我們會利用黑山羊 react-hooks-testing-library 來寫測試，如果對我稱呼黑山羊覺得疑惑的，可以直接點進 GitHub 看，相信你們會得到答案。
第一步先把黑山羊還有它依賴的套件 react-test-renderer 裝起來：
npm install --save-dev @testing-library/react-hooks react-test-renderer貼心小提醒，如果之前沒有寫過測試也不要忘了 jest 哦：
npm install --save-dev jest使用 Jest 的注意事項：
jest 的版本如果高於 26，必須把 Node 升到 10 才能使用，如果 Node 還是 8 版，記得要裝版本 26 以下的 jest。
安裝完以後就可以開始寫測試了，我們會需要從黑山羊裡面拿出 renderHook 和 act，以下是這兩個 method 的解釋：
- renderHook：用來 render useHooks 的 method，從原始碼看來就是會幫你多包個 Component 使用 useHooks，有興趣深入了解可以點這裡。
- act：可以執行 useHooks 裡用來讓 state 改變的 method。舉例來說，如果我要執行
useCounter裡面的add，就要透過act，詳細的使用會在下方提到。
沒問題就開始了。
Case 1
第一個測試是確認 useCounter 的預設起始 count 為 0，這裡沒有動作，所以只需要renderHook：
renderHook 會回傳一個物件，然後從裡面取出 result ，result 內的 current 就是 useCounter 回傳的值，所以斷言 result.current.count 是否為 0。
Case 2
第二個測試來確認 useCounter 的 add 是否能正確改變 count，這裡就會用 act 來觸發 add 了：
在上面的例子裡 act 會接收一個 function 然後執行。
Case 3
第三個測試來看看 callBack 有沒有會在 add 後被觸發，這裡除了 renderHook 和 act 外還會用到 mock 的技巧：
測試 useHooks 基本上是沒有問題，比起 component 還要容易得多，但是請注意在使用上要確認 react、react-dom 和 react-test-renderer 的版本都在 16.9.0 以上，否則就會出現下方的錯誤：
如果想要練習但又不想要準備環境的朋友們，在這裡附上 無限手套，歡迎大家彈指 clone 它。
雖然 Hooks 推出很久很久了（其實也才去年初 😂），也把測試 Hooks 放到學習清單中，但都很懶的沒有去碰，直到今天才把清單中的這項給打勾。相信有很多人已經學習過，也著手開始寫關於 Hooks 的測試，甚至遇到過各種情況或是問題，歡迎在下面留言和我分享寶貴的經驗 😃。
最後如果文章中有任何錯誤的地方，也麻煩告訴我，非常感謝 🙇♂️！
