前端單元測試 & Mocha指北

什么是單元-測試?

  • 單元就是相對獨立的功能模塊泼橘,例如一個函數(shù)或者一個類涝动。一個完整的模塊化的程序,都應(yīng)該是有許多個單元構(gòu)成炬灭,單元能完成自己的任務(wù)醋粟,然后與其他單元進行交互 ,從而完成整個程序的功能重归。
  • 而測試米愿,就是測試?yán)病?/li>

所以單元測試通俗點講就是對程序每個獨立的單元分別測試,保證構(gòu)成程序的每個模塊的正確性鼻吮,從而保證整個程序的正確運行育苟。

為什么要寫單元測試?

單元測試在前端還是不太普及的狈网,因為剛開始前端也是偏向‘UI’那一塊的宙搬,但隨著node的發(fā)展,越來越多非‘UI’的前端代碼拓哺,一個團隊也越來越多人參加開發(fā)勇垛,如果系統(tǒng)一復(fù)雜,又或者你的模塊提交到npm上面的話士鸥,一出錯基本就GG了闲孤。
又或者你這樣想,測試是逃不掉的烤礁,要么在dev上測試讼积,要么在prod上測試,怎么都得測試脚仔,而且每次提交都要測試勤众,為什么不寫自動測試呢。我也相信大多數(shù)程序員也有寫完跑跑看的習(xí)慣鲤脏,而單元測試的log都直接打印到console里面们颜,也省去了很多編譯吕朵,打包的時間,又能滿足各位的心理需求(猥瑣臉)窥突,一舉兩得啊努溃。

干了這杯 "Mocha"

mocha是一個js測試框架,除此外阻问,類似的測試框架還有Jasmine梧税、Karma、Tape等称近,至于為什么要介紹Mocha第队?因為我只懂這一個。
上代碼前還要普及一下兩個概念

  • BDD(Behavior Driven Development)
    BDD意為行為驅(qū)動開發(fā)煌茬,是一種敏捷軟件開發(fā)技術(shù)斥铺,具體內(nèi)容大家可以參考wikipedia的解釋。
  • Assertion 斷言
    斷言坛善,就是判斷代碼的執(zhí)行結(jié)果與預(yù)期是否一致晾蜘,不一致就拋出錯誤,說得簡單點就是判斷程序的真假眠屎。

舉個例子

// add.js
function add(a, b) {
    return a + b
}
module.exports = add

通常測試腳本要與測試源碼同名剔交,比如add.js的測試腳本就是add.test.js

// add.test.js
const add = require('./add.js')
const expect = require('chai').expect

describe('加法函數(shù)測試', function() {
    it('1 + 1 等于 2', function() {
        expect(add(1, 1)).to.be.equal(2)
    })
    it('返回值是Number', function() {
        expect(add(1, 1)).to.be.a('number')
    })
})

上面代碼塊就是測試腳本也拜,可獨立運行撒桨,測試腳本中應(yīng)該包括一個或多個describe塊胚股,每個describe塊應(yīng)包括多個it塊霜浴。
describe是測試套件,這個方法需要傳兩個參數(shù)棘脐,第一個為測試套件的名稱('加法函數(shù)測試')恋沃,第二個是執(zhí)行函數(shù)裆熙。
it塊是測試用例橄镜,表示一個單獨的測試偎快,是測試的最小單位,第一個參數(shù)是測試用例的名稱('1 + 1 等于 2')洽胶,第二個是執(zhí)行函數(shù)晒夹。

然后在terminal下執(zhí)行mocha add.test.js

$ mocha add.test.js

   加法函數(shù)測試
     √ 1 + 1 等于 2
     √ 返回值是Number
   2 passing (12ms)

如果我們改變一下add.js

// add.js
function add(a, b) {
    return a * b
}
module.exports = add

然后再執(zhí)行一下mocha add.test.js

$ mocha add.test.js

   加法函數(shù)測試
     √ 1 + 1 等于 2
     1) 返回值是Number
   1 passing (8ms)
   1 failing

   1) 加法函數(shù)測試 返回值是Number:
       AssertionError: expected 2 to equal 3
       + expected - actual

       -2
       +3

       at Context.it(add.test.js:6:27)

這里也可以很明顯看出哪個測試用例報錯、還有報錯的位置姊氓,這樣在開發(fā)的時候開發(fā)人員就能很容易定位錯誤丐怯。

小結(jié)

從上面一個簡單的例子可以看出,利用mocha實現(xiàn)自動化測試是很簡單的翔横。雖然前期開發(fā)需要花一點時間去寫單元測試读跷,但是后面提供的便利性足以將其彌補。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末禾唁,一起剝皮案震驚了整個濱河市舔亭,隨后出現(xiàn)的幾起案子些膨,更是在濱河造成了極大的恐慌,老刑警劉巖钦铺,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異肢预,居然都是意外死亡矛洞,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進店門烫映,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沼本,“玉大人,你說我怎么就攤上這事锭沟〕檎祝” “怎么了?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵族淮,是天一觀的道長辫红。 經(jīng)常有香客問我,道長祝辣,這世上最難降的妖魔是什么贴妻? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮蝙斜,結(jié)果婚禮上名惩,老公的妹妹穿的比我還像新娘。我一直安慰自己孕荠,他們只是感情好娩鹉,可當(dāng)我...
    茶點故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著稚伍,像睡著了一般弯予。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上槐瑞,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天熙涤,我揣著相機與錄音,去河邊找鬼困檩。 笑死祠挫,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的悼沿。 我是一名探鬼主播等舔,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼糟趾!你這毒婦竟也來了慌植?” 一聲冷哼從身側(cè)響起甚牲,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蝶柿,沒想到半個月后丈钙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡交汤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年雏赦,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芙扎。...
    茶點故事閱讀 40,561評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡星岗,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出戒洼,到底是詐尸還是另有隱情俏橘,我是刑警寧澤,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布圈浇,位于F島的核電站寥掐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏汉额。R本人自食惡果不足惜曹仗,卻給世界環(huán)境...
    茶點故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蠕搜。 院中可真熱鬧怎茫,春花似錦、人聲如沸妓灌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽虫埂。三九已至祥山,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間掉伏,已是汗流浹背缝呕。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留斧散,地道東北人供常。 一個月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像鸡捐,于是被迫代替她去往敵國和親栈暇。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,573評論 2 359

推薦閱讀更多精彩內(nèi)容