對TypeScript庫進(jìn)行單元測試的方法
原文發(fā)布于2017年7月,為保證能正常運(yùn)行,其中部分命令進(jìn)行了調(diào)整。當(dāng)時TypeScript版本為2.x,但依舊具有借鑒意義。
單元測試能限制你庫中Bug的「生長」。隨著編寫的庫越來越大,你不能總是手工測試每個特性。但你可以使用單元測試來測試每個特性,并且編寫起來并不難。下面展示如何在Typescript中設(shè)置單元測試!
步驟1:安裝用于單元測試的包
單元測試assert(推斷)代碼中一些屬性。例如你有一個方法add(x,y),其應(yīng)該正確地將x和y相加,通過單元測試你可以進(jìn)行如下測試assert(add(3,4)).equals(7)。
一些用于單元測試的庫提供了好用的assert方法來執(zhí)行測試。我們這里使用了Mocha和Chai,通過如下命令進(jìn)行安裝:
npm i mocha @types/mocha chai @types/chai ts-node typescript --save-dev
步驟2:編寫第一個單元測試
假設(shè)你有以下單元:
typescript-library/src/math.ts
export function add(x: number, y: number) {
return x + y;
}
那對應(yīng)的單元測試可能是這樣的:
typescript-library/src/math.test.ts
import { add } from './math';
import * as mocha from 'mocha';
import * as chai from 'chai';
const expect = chai.expect;
describe('My math library', () => {
it('should be able to add things correctly' , () => {
expect(add(3,4)).to.equal(7);
});
});
步驟3:運(yùn)行單元測試
您可以使用以下命令運(yùn)行測試:
./node_modules/mocha/bin/mocha --reporter spec --require ts-node/register src/**/*.test.ts
然后應(yīng)該會在控制臺中看到一個輸出,如下所示:

您可以將這個長命令放入package.json中轉(zhuǎn)換成"scripts:{"test":"…"}"然后用npm test運(yùn)行測試。也就是說此時的package.json應(yīng)該是:
{
"devDependencies": {
"@types/chai": "^4.1.7",
"@types/mocha": "^5.2.7",
"chai": "^4.2.0",
"ts-node": "^8.3.0",
"mocha": "^6.1.4"
},
"scripts": {
"test": "./node_modules/mocha/bin/mocha --reporter spec --require ts-node/register src/**/*.test.ts"
}
}
如果您想運(yùn)行單獨(dú)的某個單元測試,可以用./node_modules/mocha/bin/mocha --reporter spec --grep "TestName" --require ts-node/register src/**/*.test.ts?!癟estName”可以是任何的describe值,在本例中就如./node_modules/mocha/bin/mocha --reporter spec --grep "My math library" --require ts-node/register test/**/*.test.ts。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
es6中使用map簡化復(fù)雜條件判斷操作實(shí)例詳解
這篇文章主要介紹了es6中使用map簡化復(fù)雜條件判斷操作,結(jié)合實(shí)例形式詳細(xì)分析了傳統(tǒng)方法與map簡化復(fù)雜條件判斷的相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
JavaScript函數(shù)定義方法實(shí)例詳解
這篇文章主要介紹了JavaScript函數(shù)定義方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript函數(shù)的聲明、定義、調(diào)用等原理與常見操作技巧,需要的朋友可以參考下2019-03-03
簡略的前端架構(gòu)心得&&基于editor為例子的編碼小技巧
這一陣事情有點(diǎn)多,沒來的及更新神馬東西。今天分享兩個ppt吧。主要內(nèi)容是關(guān)于一些編碼的小技巧,另一個關(guān)于前端架構(gòu)的一些些東西。2010-11-11
Javascript實(shí)現(xiàn)的簡單右鍵菜單類
這篇文章主要介紹了Javascript實(shí)現(xiàn)的簡單右鍵菜單類,通過JavaScript自定義類實(shí)現(xiàn)右鍵菜單功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
JS+CSS實(shí)現(xiàn)六級網(wǎng)站導(dǎo)航主菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)六級網(wǎng)站導(dǎo)航主菜單效果,涉及JavaScript遍歷頁面元素及動態(tài)修改css屬性的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
詳解webpack import()動態(tài)加載模塊踩坑
這篇文章主要介紹了詳解webpack import()動態(tài)加載模塊踩坑,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
使用javascript實(shí)現(xiàn)簡單的選項(xiàng)卡切換
本文主要介紹了使用javascript實(shí)現(xiàn)簡單的選項(xiàng)卡切換的效果,代碼非常的簡單,兼容性十分棒,這里推薦給小伙伴們。2015-01-01

