Jest 單元測試入門

今天，我們要講的是 Jest 單元測試的入門知識。

為何要進行單元測試？

在學習 Jest 之前，我們需要回答一個問題：為何要進行單元測試？編寫單元測試可以給你帶來很多好處：

• 將測試自動化，無需每次都人工測試。
• 變更檢查，當代碼發生重構，可以及時發現，並做出相應的調整。
• 列舉測試用例，可以幫你了解所有的邊界情況。
• 當作文檔，如果你的測試描述足夠詳細，生成的測試報告甚至可以當作文檔。
• ……

總之，單元測試會讓你的生活更加美好。

使用 Jest 進行單元測試

編寫測試通常都會基於某個測試框架，在眾多測試框架中我選擇了 Jest，不僅因為我是個 React 開發者（React 與 Jest 都是 Facebook 出的），而且因為它確實簡單好用。讓我們開始編寫測試吧！

首先，安裝 Jest：

然後，編寫一個待測試的文件，以Stack類為例：

Stack.js

function Stack() {
// 私有變量 items，用於記錄數組，對象不能直接操作
var items = [];
// 類方法 push，在數組末尾添加項，對象可以直接調用
this.push = function (element) {
items.push(element);
};
// 刪除並返回數組末尾的項
this.pop = function () {
return items.pop();
};
}

接下來，編寫一個測試文件 Stack.test.js：

Stack.test.js

// 導入 Stack
var Stack = require(‘./Stack‘);
 
test(‘Stack‘, function () {
// 實例化一個 stack 對象
var stack = new Stack();
 
stack.push(8);
// 期望 stack 最後一項是8
expect(stack.pop()).toBe(8);
});

然後，在 package.json 中添加：

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

最後，打開命令行運行：

npm test

PASS Stack.test.js結果會在命令行中生成測試報告：

 
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.386s
Ran all test suites.

在上面的測試代碼中有個 expect().toBe() 來判斷結果是否是預期，這叫斷言。

什麽是斷言？在程序設計中，斷言（assertion）是一種放在程序中的一階邏輯（如一個結果為真或是假的邏輯判斷式），目的是為了標示與驗證程序開發者預期的結果。除了expect().toBe()之外，其他常用的斷言包括：斷言簡介

• expect().toEqual()：判斷結果是否和預期等價。
• expect().toBeFalsy()：判斷結果是否為假。
• expect().toBeTruthy()：判斷結果是否為真。

普通匹配器

• toBe - toBe 使用 Object.is 來測試是否完全相等
• .not - 用來測試相反的用例
• .toEqual - 如果你想檢查某個對象的值，請改用 toEqual。

toBe

最簡單的測試值的方法是看是否精確匹配。

test(‘two plus two is four‘, () => { 
    expect(2 + 2).toBe(4); 
});

toEqual

如果你想檢查某個對象的值，請改用 toEqual。

test(‘object assignment‘, () => { 
    const data = {one: 1}; 
    data[‘two‘] = 2; 
     expect(data).toEqual({one: 1, two: 2}); 
});

.not

用來測試相反的用例

test(‘null‘, () => {
  const n = null;
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
});

布爾值匹配器

• toBeNull 只匹配 null
• toBeUndefined 只匹配 undefined
• toBeDefined 與 toBeUndefined 相反
• toBeTruthy 匹配任何 if 語句為真
• toBeFalsy 匹配任何 if 語句為假

test(‘null‘, () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
});

test(‘zero‘, () => {
  const z = 0;
  expect(z).not.toBeNull();
  expect(z).toBeDefined();
  expect(z).not.toBeUndefined();
  expect(z).not.toBeTruthy();
  expect(z).toBeFalsy();
});

數字匹配器

• .toBeGreaterThan() - 大於
• .toBeGreaterThanOrEqual() 大於等於
• .toBeLessThan() - 小於
• .toBeLessThanOrEqual() - 小於等於
• .toBeCloseTo() - 浮點數比較

toBeGreaterThan、toBeGreaterThanOrEqual、toBeLessThan、toBeLessThanOrEqual

test(‘two plus two‘, () => { 
const value = 2 + 2; 
 expect(value).toBeGreaterThan(3); 
 expect(value).toBeGreaterThanOrEqual(3.5); 
 expect(value).toBeLessThan(5); 
 expect(value).toBeLessThanOrEqual(4.5);

// toBe 和 toEqual 對於數字來說是一樣的
 expect(value).toBe(4); 
 expect(value).toEqual(4); 
});

.toBeCloseTo()

對於比較浮點數的相等，應該使用 toBeCloseTo

test(‘兩個浮點數字相加‘, () => {
    const value = 0.1 + 0.2;        // 0.30000000000000004 
    expect(value).toBe(0.3);        // 這句會報錯，因為 js 浮點數有舍入誤差
    expect(value).toBeCloseTo(0.3); // 這句可以運行
});

字符串匹配器

• toMatch - 正則表達式的字符
• .toHaveLength(number) - 判斷一個有長度的對象的長度

toMatch

正則表達式的字符

test(‘there is no I in team‘, () => {
  expect(‘team‘).not.toMatch(/I/);
});

test(‘but there is a "stop" in Christoph‘, () => {
  expect(‘Christoph‘).toMatch(/stop/);
});

.toHaveLength(number)

判斷一個有長度的對象的長度

expect([1, 2, 3]).toHaveLength(3);
expect(‘abc‘).toHaveLength(3);
expect(‘‘).not.toHaveLength(5);

數組匹配器

• .toContain(item) - 判斷數組是否包含特定子項
• .toContainEqual(item) - 判斷數組中是否包含一個特定對象

.toContain

判斷數組是否包含特定子項

const shoppingList = [
  ‘diapers‘,
  ‘kleenex‘,
  ‘trash bags‘,
  ‘paper towels‘,
  ‘beer‘,
];

test(‘購物清單（shopping list）裏面有啤酒（beer）‘, () => {
  expect(shoppingList).toContain(‘beer‘);
});

.toContainEqual(item)

可以判斷數組中是否包含一個特定對象，類似 toEqual 與 toContain 的結合

function myBeverages() {
    return [
        {delicious: true, sour: false},
        {delicious: false, sour: true}
    ]
}
test(‘is delicious and not sour‘, () => {
    const myBeverage = {delicious: true, sour: false};
    expect(myBeverages()).toContainEqual(myBeverage);
});

Jest 單元測試入門