前言
單元測試，簡單來說就是技術(shù)人員的白盒測試（程序測試）。為了減少產(chǎn)品的開發(fā)周期時間以及后期的修復(fù)代價，逐漸要求技術(shù)人員要在開發(fā)過程中梳理清晰自己開發(fā)功能邏輯，編寫相對應(yīng)的單元測試程序代碼，用于對自己思維邏輯實現(xiàn)的一個校驗測試。
前端開發(fā)人員編寫單元測試的工具和框架有幾個主流的，但查找了很多網(wǎng)站，發(fā)現(xiàn)沒有哪個網(wǎng)站系統(tǒng)地講述從零開始如何搭建前端的一個工具+框架自動化單元測試環(huán)境直至可以添加自文件可測試使用。所以，根據(jù)自己搭建的一些經(jīng)驗，我總結(jié)了一些步驟，搭建完成之后只需要保存一份，可以在其中添加不同的自定義js文件，都可以運行控制臺命令針對js文件進行單元測試。（我的環(huán)境搭建是在window系統(tǒng)下的）
一、測試框架/工具
- 測試管理工具： karma
- 測試框架： mocha/jasmine（本文講述的是mocha）
- 斷言庫： chai
- 測試瀏覽器： Phantomjs
- 測試覆蓋率： karma-coverage
二、構(gòu)建基本的原生js單元測試
1. 創(chuàng)建項目的package.json
創(chuàng)建一個空項目文件夾，如mytest，在項目根目錄下執(zhí)行控制臺命令：npm init
npm init
之后按照提示進行創(chuàng)建基礎(chǔ)的package.json文件信息即可（我都是直接按Enter）：
2. 配置項目的package.json
分別執(zhí)行以下控制臺命令，將需要的工具/環(huán)境安裝到項目中，安裝完成后pakeage.json的devDependencies
中相應(yīng)改變出現(xiàn)相關(guān)安裝工具依賴。
執(zhí)行的控制臺命令：
npm install --save-dev karma
npm install --save-dev karma-mocha
npm install --save-dev karma-chai
npm install --save-dev karma-phantomjs-launcher
npm install --save-dev karma-coverage
npm install --save-dev mocha chai
所有工具/環(huán)境安裝成功后，package.json中是devDependencies這樣的：
"devDependencies": {
"chai": "^3.5.0",
"karma": "^1.4.1",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"mocha": "^3.2.0"
}
3. 初始化Karma配置文件
在項目的根目錄運行karma init，初始化配置成功后會在根目錄下生成karma.conf.js文件。
karma init
按照截圖進行初始化配置：
表示配置使用mocha框架以及PhantomJS無頁面瀏覽器執(zhí)行前端js代碼的單元測試，配置需要被測試的代碼和測試代碼放在src/和test/文件夾中。
補充說明：
在項目下安裝完所有局部環(huán)境之后，根目錄下運行karma init命令行可能仍會報錯（karma init為無效命令等）
解決方案：在本電腦全局下安裝karma
npm i karma -g
4. 修改Karma基本配置
此時初始化的karma.conf.js只是最基本的karma配置，我們還需要手動修改一些地方。
- 在其中的frameworks一項中增加chai：
frameworks: ['mocha','chai'],
- 然后在config.set({})中添加：
plupins:[
'karma-mocha',
'karma-chai',
'karma-phantomjs-launcher'
]
5. 針對覆蓋率修改Karma配置文件
- 在preprocessors和reporters中添加：
preprocessors: {
'src/*.js':['coverage']
},
reporters: ['progress','coverage'],
- 然后在config.set({})中的plugins中添加：
plugins:[
'karma-mocha',
'karma-chai',
'karma-phantomjs-launcher',
'karma-coverage'
]
6. 開始編寫測試代碼
經(jīng)過上述步驟，基本上單元測試的工具/環(huán)境依賴已安裝完成，可以開始進行源代碼的編寫測試。
在上文的初始化Karma配置時，已經(jīng)告訴Karma，需要被測試的代碼和測試代碼放在src/和test/文件夾中，所以我們應(yīng)該在src/文件夾下提供要被測試的代碼，在test/文件夾下提供測試代碼：
在src/文件夾中新建index.js文件，在這個文件中添加三個非常簡單的函數(shù)：
function isNum(num){
return typeof num === "number"
}
function isString(str){
return typeof str === "string"
}
function isLarge10(num){
return num > 10;
}
然后在test/文件夾中新建index.test.js文件。通常，測試腳本與所要測試的源碼腳
本同名，但是后綴名為.test.js（表示測試）或者.spec.js（表示規(guī)格）。在該文件
中開始編寫測試代碼：
describe('index.js的測試',function(){
it('1應(yīng)該是數(shù)字',function(){
//expect(isNum(1)).to.be.true
isNum(1).should.equal(true);
})
it('"1"應(yīng)該是字符',function(){
//expect(isString("1")).to.be.true
isString("1").should.equal(true);
})
it('11大于10',function(){
//expect(isLarge10(11)).to.be.true
isLarge10(11).should.equal(true);
})
})
編寫測試文件時，describe、it都是由mocha提供的測試用api：
describe塊成為“測試套件”，表示一組相關(guān)的測試。他是一個函數(shù)，第一個參數(shù)是測試套件的名稱，第二個參數(shù)是具體要執(zhí)行的測試函數(shù)；
it塊稱為測試用例，表示一個單獨的測試，即測試的最小單位。他也是一個函數(shù)，第一個參數(shù)表示測試用例的名稱，第二個參數(shù)表示具體要求執(zhí)行的斷言函數(shù)；
7. 運行單元測試
被測試代碼和測試代碼編寫完畢后，在項目根目錄輸入：karma start
karma start
如果測試不通過，測試套件和測試用例的描述都會在命令行輸出，告訴你哪里測試失敗了。并且這時你修改任意代碼，單元測試便會在你保存后自動運行。
你的項目中便會多出一個coverage文件夾，文件夾中按照瀏覽器分了覆蓋率統(tǒng)計結(jié)果，我們使用的是PhantomJs，自然會有一個PhantomJs*文件夾，用瀏覽器打開index.html便可查看測試覆蓋率。
（補充說明：在我安裝局部單元測試環(huán)境依賴后，會存在執(zhí)行karma start命令時報錯的情況，所以可能新手朋友們在此步驟執(zhí)行時也會出現(xiàn)報錯，我分析是因為只有karma在全局安裝了，而其他的所有環(huán)境都是在項目目錄下進行局部安裝的，此時運行karma start使用全局環(huán)境karma去執(zhí)行命令就會發(fā)現(xiàn)全局中沒有其他模塊而導(dǎo)致報錯，基本上報錯類型包括提示mocha模塊出錯，加載不了coverage模塊，加載不了chai模塊等等，目前我找到的解決方案就是對于報錯的工具/環(huán)境進行全局執(zhí)行安裝，如全局安裝mocha執(zhí)行控制臺命令：
npm install mocha -g
解決思路就是缺少什么就對什么進行全局安裝。）
好了，以上就是我自己在安裝使用前端單元測試工具和框架時一些步驟的簡單總結(jié)，根據(jù)這個步驟可以基本創(chuàng)建一個原生js文件的測試環(huán)境包，之后只需要把要測試的js源文件放進src文件夾，把對應(yīng)源文件的自己根據(jù)chai斷言庫編寫的單元測試用例文件放進test文件夾中，再執(zhí)行karma start命令就可以測試自己的js邏輯。
