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/