最近研究了js的單元測試,分享一下心得。 說起單元測試以前還真是不太瞭解,這次索性瞭解一番,測試有很多包含單元測試,性能測試,安全測試和功能測試等幾方面,本次只介紹一下單元測試。 前端進行單元測試主要是為了提高自己的代碼質量,多組測試用例,驗證自己的代碼是否都能通過,這是在開發中很有必要的。需要倡導 ...
最近研究了js的單元測試,分享一下心得。
說起單元測試以前還真是不太瞭解,這次索性瞭解一番,測試有很多包含單元測試,性能測試,安全測試和功能測試等幾方面,本次只介紹一下單元測試。
前端進行單元測試主要是為了提高自己的代碼質量,多組測試用例,驗證自己的代碼是否都能通過,這是在開發中很有必要的。需要倡導的是‘開發者應該吃自己的狗糧’,*——*
單元測試主要包含斷言,測試框架,測試用例等幾個方面,
斷言:
斷言是對代碼結果的一種判斷,如果這種判斷和結果是一樣的,那麼這個斷言就是真的,測試就通過了,如果為假的,程式就會終止執行,並出現錯誤信息。
斷言庫有很多expect
,should,chai,其次就是node的assert斷言,本次主要說assert斷言
var assert=require('assert'); assert.equal(Math.max(1,100),100);
一但assert.equal()不滿足期望,將會拋出AssertionError異常,整個程式將停止執行。
斷言規範中,我們定義一下幾種檢測方法:
ok()判斷結果是否為真,
equal()判斷實際值與期望值是否相等,
notEqual():判斷實際值與期望值是否不相等
deepEqual():判斷實際值與期望值是否深度相等(對象和數組的元素是否相等)
notDeepEqual:判斷實際值與期望值是否不深度相等
strictEqual:判斷實際值與期望值是否嚴格相等(===)
notStrictEqual:判斷實際值與期望值是否不嚴格相等(相當於!==)
throws:判斷代碼塊是否拋出異常
市面上的大多斷言庫都是基於assert模塊進行封裝和擴展的,這包括著名的should.js斷言庫
安裝:
npm install should --save-dev
測試框架
前面提到斷言一旦檢查失敗,將會拋出異常停止整個應用,這對於大規模的斷言檢查時並不友好,更通用的就是拋出異常並且繼續執行,最後生成測試報告,這任務承擔著就是測試框架,優秀的單元測試框架是mocha(發音:摩卡),mocha本身不含有斷言庫,所以必須先引入斷言庫,像上面提到的斷言庫,不限於使用哪種。
安裝:
npm install mocha -g(全局安裝)
測試風格:
TDD(測試驅動開發)和BDD(行為驅動開發)這兩種,他們的不同是什麼?
TDD關註多有功能是否被正確的實現,每個功能都具備對於的測試用例;BDD關註整體行為是否符合規格預期,適合自頂向下的設計方式
TDD表達方式偏向於功能說明書的風格;BDD的表達方式更接近於自己的語言習慣
我個人比較習慣BDD風格方式:
主要採用describe和it進行組織,一個測試腳本與所要測試的源碼腳本同名,但是尾碼名為.test.js
(表示測試)或者.spec.js
(表示規格),比如,add.js
的測試腳本名字就是add.test.js
。
// add.test.js 測試腳本名字 var add = require('../lib/add'); describe('add', function () { it('6 + 7 = 13', function () { add(6,7).should.equal(13) }) it('9 + 10 = 19', function () { add(9 , 10).should.equal(19) }) })
一個測試腳本由一個或多個describe測試套件組成,一個測試套件由一個或多個it測試用例組成,
describe
塊稱為"測試套件"(test suite),表示一組相關的測試。它是一個函數,第一個參數是測試套件的名稱("add"),第二個參數是一個實際執行的函數。
it
塊稱為"測試用例"(test case),表示一個單獨的測試,是測試的最小單位。是一個函數,第一個參數是測試用例的名稱("6 + 7 = 13"),第二個參數是一個實際執行的函數。
mocha基本用法
有了測試腳本就可以使用mocha運行它
mocha
命令後面緊跟測試腳本的路徑和文件名,可以指定多個測試腳本。
mocha file1 file2 file3
註意:mocha預設運行test子目錄第一層的測試用例,不會執行更下層的用例。
例如:test文件下有個dir目錄,裡面有個測試腳本add.test.js,這是執行不到的,為了改變這種行為,就必須加上--recursive
參數,這時test
子目錄下麵所有的測試用例都會執行。
對於es6,需要經過編譯後才可以進行測試,
轉碼需要安裝
npm install babel-core babel-preset-es2015 --save-dev
然後 在根目錄下麵創建babelrc,配置:
{ "presets": [ "es2015" ] }
註意,Babel預設不會對Iterator、Generator、Promise、Map、Set等全局對象,以及一些全局對象的方法(比如Object.assign
)轉碼。如果你想要對這些對象轉碼,就要安裝babel-polyfill
。
npm install babel-polyfill --save-dev
使用時候需要導入
import 'babel-polyfill'
測試工具
karma則屬於測試工具,能夠模擬各種環境來運行你的測試代碼,比如Chrome,Firefox,mobile等等。
(提一下:travis ci,是一個遠程免費的持續集成(CI)服務,你可以通過配置綁定你github上的項目,並且配置運行環境,實現只要github上有代碼更新,travis就會自動運行構建和測試,並反饋運行結果。)
使用karma
步驟 全局安裝 karma npm install -g karma-cli 安裝所有依賴 ...... 初始化測試 karma init 1. Which testing framework do you want to use ? (mocha) 2. Do you want to use Require.js ? (no) 3. Do you want to capture any browsers automatically ? (Chrome) 4. What is the location of your source and test files ? (https://cdn.bootcss.com/jquery/2.2.4/jquery.js, node_modules/should/should.js, test/**.js) 5. Should any of the files included by the previous patterns be excluded ? () 6. Do you want Karma to watch all the files and run the tests on change ? (yes) 啟動測試 karma start
karma.conf.js:
module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha'], //使用的框架 files: [ //依賴模塊 'https://cdn.bootcss.com/jquery/2.2.4/jquery.js', 'node_modules/should/should.js', 'test/**/*.js', 'src/**/*.js' ], exclude: [//排除文件列表 ], preprocessors: { }, reporters: ['progress'], port: 9876,//服務埠號 colors: true,//啟用或禁用輸出報告或者日誌中的顏色 logLevel: config.LOG_INFO, autoWatch: true, //啟用或禁用自動檢測文件變化進行測試 browsers: ['Chrome'], //測試啟動的瀏覽器 singleRun: false,//開啟或禁用持續集成模式 設置為true, Karma將打開瀏覽器,執行測試並最後退出
concurrency: Infinity//併發級別(啟動的瀏覽器數)
})
}
詳細瞭解可以去karma :http://karma-runner.github.io/latest/index.html