從零開始 測試React custom hooks

配合enzyme套件自己寫custom hooks測試

react hooks也推出了一段時間了，最近也幾乎所有熱門套件(react-router, graphql…等)都有推出hook的對應改版，然而我們今天自己撰寫自訂的hook functions，我們除了用現成套件(@testing-library/react-hooks)，也可以嘗試寫個簡單的test hook的function來幫我們做hook的測試。

* 備註: 本專案主要會以Typescript +React開發

索引

前置作業

自己寫custom hooks測試: renderHooks

實際應用

總結

前置作業

套件安裝

這邊我們可以直接用create-react-app來啟動專案，接著我們需要安裝enzyme這個套件來幫我們做組件相關的測試

npx create-react-app {YOUR_PROJECT_NAME} --template typescript
npm i -D enzyme enzyme-adapter-react-16
// 如果用typescript開發
npm i -D @types/enzyme @types/enzyme-adapter-react-16

自己寫custom hooks測試

以下講解renderHook中各個主要的function

TestHookWrapper

用於產生一個"空的component"，在每次組件更新時，此function component都會重新被呼叫一次，這時候我們只是透過ref去取得state的最新值

renderHooks

透過此function我們可以透過此function的return值，拿到custom hook的最新值。

這邊要先注意一下，接下來的測試如果你預先把ref的值用const {} = hookRef.current先解構出來，「該值是不會再被改變的」，你無法測得任何值的變化

實際應用

custom hook

useToggle

實際測試撰寫

主要測試hook 的 handleToggle在執行後，以下的條件是否有觸發

• 值的改變
• useEffect的callback觸發

測試成功!

總結

• renderHook：用renderHook幫助我們測試custom hook，主要是用ref存放hook 每一次更新的值
• 測試：要測試最新的值一定要用current.{HOOK_STATE}取得，不能事先解構(除了function不會改變這種可以先是先取得)

祝各位測試愉快，附上此文章範例的Github Repo

參考/引用

https://github.com/testing-library/react-hooks-testing-library