[筆記] React Unit Test 關於路由和套件的模擬 By Jest

章節連結

近期在撰寫 Unit Test 時,遇上要測試 React Router Dom 所渲染的內容是否與所給予的參數相符。這篇筆記下思路和一些關鍵寫法。

react logo


思路

1. 僅需要專注在測試的元件上。若你一個元件中其實內有相當多的函式子元件,那你可以僅 export 該子元件出來測試即可
2. 若該元件內有用到 react-router-dom 的內容,當你要在 Unit Test 成功模擬其部分內容,你會需要在測試檔案中引入 react-router-dom,並在最頂端宣告 jest.mock
3. jest.requireActual(元件名稱),可以讓你保留大多數的元件名稱內容,你僅需要將你會要 Mock 的函式名稱用 jest.fn() 宣告即可
4. 每一個 describe 中,你會需要用 jest.mockReturnValue 來模擬回傳值。由於型別勢必和原有的定義不同,會需要用到 TS 的 as
5. 在 beforeEach() 區塊中進行 jest.mock,容易遇上 mock 不完整的情況。因為你的函式 import 是在最一開始就執行的。當你將 import 放到內部或是在 beforeEach 內進行 jest.mock,都沒有辦法確保執行的優先順序


程式碼 Demo

按讚加入粉絲團

延伸閱讀