讓 Jest 幫你的 code 做測試


Posted by ai86109 on 2020-06-28

前言

我們寫完程式通常都要測試能不能跑出正確結果,之前的測試我們都是輸入一些值,再 console.log 看出來的結果對不對,但其實這樣很沒效率,也不容易規模化。

Jest

而 Jest 是 facebook 開發的單元測試工具,通常專案裡最小的單位就是一個 function,這邊稱為一個單元,當這些 function 經過測試之後都沒問題,整個專案的功能運行也比較不會出錯。

使用方式可以到官網,按照她的步驟安裝: https://jestjs.io/docs/en/getting-started.html

通常我們在跑測試時,會建立一個檔案名稱為 原檔名.test.js 的檔案去做測試(這樣取檔名是慣例)。按照網站上的指示寫上程式碼,把 test 的那行參數置換成你要測試的(引入的檔案可以參考這篇),expect 是 Jest 提供的 function,參數填你的 function&其參數,再接 tobe,裡面放你預期的答案。

@index.test.js

var double = require('index2')

test('1 變成兩倍等於 2', function(){
    expect(double(10)).toBe(20);
  });

那寫好了要怎麼測試呢?
可以到 package.json 裡面,將 scripts 裡面的 test 後面置換成 jest

"scripts": {
    "test": "jest",
}

npm run test 跑出 pass 就代表成功。

所以照理說,我直接在 terminal 輸入 jest index.test.js,應該也可以跑測試吧?

但其實是不行的,電腦會顯示找不到。
原因是 jest 並沒有 global 的安裝在你的電腦裡,而是安裝在你這個 project 底下,所以你電腦並不會去設定一些東西讓你找到並使用這個指令。

如果只想測試一隻檔案,在剛剛 jest 後面,空一格加上檔案名

"scripts": {
    "test": "jest index.test.js",
}

如:jest index.test.js
或是在 terminal 輸入npx jest 檔案名
這個 npx 會在你這個專案裡面找有沒有 jest 這個東西(而直接在 terminal 輸入 jest index.test.js,則是會在你系統找 jest)

測試多個 test

test('10 變成兩倍等於 20', function(){
    expect(double(10)).toBe(20);
  });

test('1 變成兩倍等於 2', function(){
    expect(double(1)).toBe(2);
  });

test('100 變成兩倍等於 200', function(){
    expect(double(100)).toBe(200);
  });

然後執行 npm run test 就可以跑測試了。

但這樣看起來滿分散的。
可以把多個測試,也就是剛剛的,用 describe 這個語法組成一個 suite。

test('1 變成兩倍等於 2', function(){
    expect(double(10)).toBe(20);
  });

放在

describe(‘測試double’, function(){

})

裡面
讓他變成這樣

describe(‘測試double’, function(){
    test('10 變成兩倍等於 20', function(){
    expect(double(10)).toBe(20);
  });

    test('1 變成兩倍等於 2', function(){
        expect(double(1)).toBe(2);
      });

    test('100 變成兩倍等於 200', function(){
        expect(double(100)).toBe(200);
      });
})

而剛剛這樣把寫好的 function 拿進來測試的動作,就稱之為 unit test(單元測試)。


TDD, test-driven development 測試驅動開發

先將測試的架構寫好,再寫前面內容的開發方式,每開發一個段落就測試一次看看是否有滿足測試結果,這樣的開發方式就稱為『測試驅動開發』。

Test case 要盡量寫的完整,考慮各種邊界,才是有意義的測試。

但要怎麼把 test case 寫得好?

這我也要多找點東西來看看,希望以後可以把這塊補上,提供幾篇我正在看的文章:
如何設計 test case
Test Case所涵蓋的範圍足夠了嗎?


#Jest #Unit Test #test case







Related Posts

CSS Flex & Grid 排版詳解(上):What the Flex?

CSS Flex & Grid 排版詳解(上):What the Flex?

[06] JavaScript 入門 - 拉升、嚴格模式

[06] JavaScript 入門 - 拉升、嚴格模式

[ 前端工具 ] - gulp, Babel, SCSS, uglyfy

[ 前端工具 ] - gulp, Babel, SCSS, uglyfy


Comments