[JavaScript] 安裝Jest單元測試

Jest為javascript的前端測試工具，安裝快速且不需複雜的設定，執行速度快，所有測項可以同時進行讓效能最大化，並可以搭配用在vue.js、React等進行UI component的測試。

安裝指令

npm install --save-dev jest

npm的安裝教學可以參考「教學」。

實作

以簡單的JavaScript程式來測試執行，將傳入的陣列合併成字串回傳：

// combineArray.js
const combineArray = (array, separator = ',') => {
        if (!Array.isArray(array)) {
                return new Error('Invalid input array');
        }
        if (typeof separator !== 'string') {
                return new Error('Invalid input separator');
        }

        return array.join(separator)
};

module.exports = combineArray;

測試的副檔名 *.test.js

// combineArray.test.js
const combineArray = require('./combineArray');

test('Combine array: [1, 2]', () => {
        expect(combineArray([1,2])).toBe('1,2');
});

• 每個一測試檔案都必須至少有一個test()，第一個參數是名稱；第二個參數是執行expect實際測試內容的function。[參考]
• expect()常用的方式expect(A).toBe(B)，也就是期望A會等於B。[參考]

在package.json新增內容:

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

執行測試

npm run test

所有的*.test.js都會跑過一次，並顯示結果，包含有多少測試項目以及成功和失敗的數量。



根據程式碼的複雜程度可以寫出許多測試項目，為了方便辨識測試內容，describe()可以將測項分類、建立群組，.toThrow()判斷錯誤發生的情形等等：

const combineArray = require('./combineArray');

describe('Combine array', () => {
        const inputArray = [1, 2];

        test('Default', () => {
                expect(combineArray([])).toBe('');
                expect(combineArray(inputArray)).toBe('1,2');
                expect(combineArray(inputArray, undefined)).toBe('1,2');
        });
        test('With custom separator', () => {
                expect(combineArray(inputArray, ' ')).toBe('1 2');
                expect(combineArray(inputArray, '*')).toBe('1*2');
                expect(combineArray(inputArray, '-')).toBe('1-2');
        });

        describe('With invalid input', () => {
                test.each(
                        [undefined, null, 1, 'string', {}]
                )('Input array: %s', (item) => {
                        expect(() => {
                                combineArray(item);
                        }).toThrow(new Error('Invalid input array'));
                });
                test.each(
                        [null, 1, [], {}]
                )('Input separator: %s', (item) => {
                        expect(() => {
                                combineArray(inputArray, item);
                        }).toThrow(new Error('Invalid input separator'));
                });
        });
});

執行結果


若有任何不符合預期的結果，console上會寫出哪一個測項失敗，預期的輸出和輸入為何。測試項目寫得越完備越好，往後即使更新主程式，也可以再以指令執行測試，確保程式運作如你所預期。

更多的方法可以前往官網參考:
https://jestjs.io/