React Native 從頭學筆記15 — 總結 Jest

有了前兩篇的基礎,我(幾乎)確定自己的讀者應該有完全的能力能輕鬆看懂 Jest 官網的相關文件,在需要用到時可以自行查閱而無阻礙。這一篇中,我會列出相關的資源,以及再一點點的補充,來結束 React Native 測試關的部分。

Jest API 文件

  1. 有更多有關 fixtures、執行/不執行哪些 test … 等資訊,可以在「Globals」內查閱到。
  2. 「Expect」可以查到所有的 expect 方法。這部分我補充一下:
上面的程式碼源自官網,在編寫樣式上又有點不一樣,待我說明一下:
(1) describe 和 it 是格式一模一樣的函式,即:
describe(“文字", function);
it("文字”, function);
只是 it () 函式被嵌套在 describe 的第二個參數(一個 function) 而已。
(2) it() 函式,就等於 test() 函式。所以 it() 函式就是 “Test Case”。
(3) describe() 函式,其實就是我們在「React Native 從頭學筆記11 — 從測試行為到設計思維」提到的 “Test Suite"。
(4) expect() 函式提供了更多可讀性高的方法 (method) 給我們用,之前我們一直看到的是 toBe()。expect() 和方法的組合,就像是 xUnit 測試框架的 assert() 方法群是接近的。如:.toBeNull().toContain(item)

3. Jest 也支援 Mock 來驗證「流程正確性」;與 Expect 支援的「結果正確性」互補。

4. 由於 JSX 的 Component 是一個有畫面渲染功能的類別,Jest 也針對畫面的渲染測試做出了支援:Snapshot Testing,並搭配了 Expect 提供的方法,.toMatchSnapshot()。這個功能比較特別,它把程式碼會渲染出來的網頁格式(HTML/JS)自動產生出來,儲存為一個 snapshot 檔案;未來我們要"重構"某些程式碼時,只要看看重構後的程式碼在渲染之後產生的網頁內容與 snapshot 是否相符,就知道"重構"後的程式碼是否具有一樣的渲染結果。

這篇對我來說,只是一個索引:未來需要用到時再來查閱用的。當我們真的進行設計時,知道有什麼方式可以提出我們的疑問、以及如何找到驗證它的方式即可。

Show your support

Clapping shows how much you appreciated WuFeng Chiang’s story.