React Native 從頭學筆記12 — 開始使用 Jest

在 React Native 的官網文件「Testing」中,列出了許多可用的測試工具。預設跑在 React Native 上的則是「Jest」。(大概是由 JavaScript Test 兩個字合併來的)

來寫第一支 "設計" 程式吧!檔案任意取,記得放在 __tests__ 裡。我的檔案名稱是「my.tests.js」,內容如下:

然後運行 npm test:

得到一個光榮的失敗。第一次的紅色訊息!

這個光榮的失敗是令人滿意的。依照提示:sayHelloTo 未定義。是的,我們引用了 sayHelloTo() 函式,但是並未實作它。我們目前只知道:我的需求是把人名當作參數傳給 sayHelloTo()函式,然後它會列出向該人名打聲招呼的訊息。我的意圖明顯,這是個光榮的失敗。(能想像居然測試通過會讓人多恐慌嗎?)

我們實作了 sayHelloTo() 函式

然後再一次執行 npm test

一次光榮的成功!

看到綠綠的訊息(PASS)充滿螢幕畫面,是時候鬆口氣、喝點咖啡、讚美一下女同事的新髮型、或是找個遠景凝視一下。做得好。

接下來進行重構。回顧一下 my.tests.js:

第5~7行的 sayHelloTo()函式是未來我們要重複使用的函式,是未來「產品程式碼」的部分。未來其他的開發人員可以使用它。

我們把第5~7行「抽出來」,放到另一個檔案,假設該檔案是:

core 目錄是我額外建立的,message.js 也是新建的檔案。把第5~7行放入進去後,在最後一行加上:module.exports = sayHellTo; 。(模組匯出)

這時的 my.tests.js 的內容改為:

在第1行加上一個匯入的動作: require()。參數為檔名,加不加附檔名 (.js) 都可以哦。然後再執行 npm test 看看:

看到綠色訊息(PASS)代表我們的 my.tests.js 中的匯入是成功的。

到目前為止,我們有:
1. 一支測試/設計程式:my.tests.js (先有)
2. 一支產品/專案的正式程式碼:message.js (後有)

兩者之間的關係,則是:

1. 其他開發者使用 message.js。
2. message.js 的正確性由 my.tests.js 驗證。
3. 其他開發者可以藉由閱讀 my.tests.js 來了解 message.js 的用法。

以上。

Show your support

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