[ 筆記 ] JavaScript - 測試 Jest - TDD


Posted by krebikshaw on 2020-06-28

Jest

Jest 是由 Facebook 開發的 JavaScript 測試框架

  • 先用 npm or yarn 下載套件:

    • npm install jest --save-dev
    • 從 package.json 可以看到 devDependencies 欄位裡會顯示剛安裝好的 Jest

      "devDependencies": {
      "jest": "^24.7.1"
      }
      
    • 接下來要修改 package.json 中 script 欄位的 test 指令為:
      "test": "jest"

      "scripts": {
      "test": "jest"
      },
      
    • 設定好後,只需要在 Terminal 輸入: npm run test

      • 如果直接在 Terminal 輸入 jest 指令是不會有反應的喔,因為他是被安裝在專案目錄下,而 Terminal 內的 jest 指令需要安裝在全域下才能運行。

開始測試

Jest 進行測試時,會先找專案中副檔名為 .test.js 的檔案。

  • npm run test:執行當前資料夾底下所有的測試
  • npm run test <file_name>.test.js:執行單一個測試檔
    假設我們建立一個測試檔 repeat.test.js 來測試 repeat.js

repeat.js

function repeat(str, times) {
    var result = '';
    for (var i=0; i<times; i++) {
        result += str;
    }
    return result;
}
module.exports = repeat; // 匯出函式 repeat()

repeat.test.js

var repeat = require('./repeat'); // 引入函式 repeat()

describe("測試 function - repeat()", () => {

    test('"abc" 重複 3 次', () => {
        expect(repeat('abc', 3)).toBe('abcabcabc');
    });
    test('<空字串> 重複 10 次', () => {
        expect(repeat('', 10)).toBe('');
    });
    test('"abc" 重複 0 次', () => {
        expect(repeat('abc', 0)).toBe('');
    });
});
  • describe:描述這個測試是屬於哪個元件或者函式
  • test:定義一個最小的測試案例
  • expect & tobe:用來判斷執行後需要對應的輸出結果
    • 白話文就是: expect(<裡面回傳的結果>).toBe(<應該要跟這裡相等>);

參考資料:用jest+enzyme來寫Reactjs的單元測試吧!

TDD 測試驅動開發

  • Test-Driven-Development
  • 一種 先寫測試再寫程式,的開發流程
  • 優點
    • 先寫好測試,可以先理解程式本身的目的為何
    • 避免實際在寫程式的時候出現不必要的功能,使程式的本質偏離
    • 防止自己程式寫好後,忘記要寫測試

寫測試不光是為了測試

若是先寫程式再寫測試,可能就真的是為了確認功能是否正常運作。
但若是在寫程式之前先把其餘的規劃做好,程式本身可以更加優美。

  • 例如:先想清楚,使用者、使用端到底要怎麼用我接下來提供的功能或產品,才會比較好用?再以這樣的雛形去設計程式。

#Jest #測試







Related Posts

D17_第二週作業、變數儲存模型

D17_第二週作業、變數儲存模型

學會 HTML & CSS (關於 HTML 的部份)

學會 HTML & CSS (關於 HTML 的部份)

記憶力大考驗-默默默寫QQ

記憶力大考驗-默默默寫QQ


Comments