1. 程式人生 > >前端新手使用karma+mocha+chai+sinon 進行angularjs 單元測試

前端新手使用karma+mocha+chai+sinon 進行angularjs 單元測試

這裡只談如何搭建環境。
選型:在jasmine 和 mocha+chai中間比較了一下,根據專案需要選擇了後者。

安裝依賴包和環境

直接執行下列命令安裝或在專案目錄下 執行npm install(package.json已經配置好了)、

npm install  chai mocha sinon angular-mocks@1.5.5 --save-dev
npm install    karma-mocha karma-chai  karma-sinon --save-dev
npm install    karma-chrome-launcher  --save-dev
npm install    karma-coverage
--save-dev npm rebuild //build packages for current platform

注意:angular-mocks版本號儘量跟angularjs版本號一致。

生成karma.config.js

在專案目錄下,確認karma.config.js存在,如果不存在則使用執行karma init 根據提示填寫對應選項生成配置檔案。

根據專案情況修改karma.config.js檔案

要注意的引數:

1)自動生成的配置檔案可能沒有plugins,可以手動註冊plugins,如下

plugins:[
'karma-mocha',
'karma-chai'
, 'karma-coverage', 'karma-sinon', 'karma-chrome-launcher', 'karma-jasmine' ],

2)files,新增測試所需的所有js檔案(執行時js和test js),可以使用glob pattern來匹配路徑,但推薦不要使用過於寬泛的pattern來匹配js,因為順序會導致測試時js加載出錯。將被依賴的js放在最上方,確保檔案順序符合依賴關係要求,以myApp為例,順序如下:

files:[
    'lib/angular.min.js',
    'lib/angular-mock.js',
    'lib/angular-md5.js',
    'lib
/jquery-2.2.4.min.js', 'lib/jquery.page.js', 'lib/es5-sham.min.js', 'lib/bootstrap.min.js', 'lib/angular-multi-step-form.js', 'lib/angular-scroll-glue.js', 'lib/angular-ui-router.min.js', 'lib/angular-translate.js', 'lib/angular-translate-loader-partial.js', 'lib/ng-tree-dnd.js', 'lib/angular-cron-jobs.min.js', 'lib/ngDialog.js', 'js/app.js', 'js/service/constant.js', 'js/service/**/*.js', 'js/directive/**/*.js', 'js/filter/*.js', 'js/controller/**/*.js', 'test/**/*.test.js' ],

3)singleRun
開發環境進行測試時,建議置為false,但是在jenkins整合環境中,該配置項必須置為true。當為false且autoWatch置為true時,karma自動監控檔案變化並執行所有測試用例。
4)browsers
在windows或其他有GUI的OS中執行測試時,可以設定為 chrome或其他瀏覽器,具體關鍵字參考karma配置檔案說明;
對於沒有GUI或者不需要開啟GUI的情況,可以設定

browsers:[‘ChromeHeadless’],

browsers: [‘PhantomJS’]

前者要求安裝chrome且版本號高於59,後者要求在第一步中安裝下列兩個元件:

npm i -D phantomjs-prebuilt –phantomjs_cdnurl=https://bitbucket.org/ariya/phantomjs/downloads
npm i -Dkarma-phantomjs-launcher

目前phantomjs版本維護面臨困境,建議選擇chrome59後的版本。

5)frameworks
由於步驟一選擇mocha+chai+sinon,此處填寫 frameworks:[‘mocha’,’chai’]
如果選擇使用jasmine,此處填寫jasmine即可。

新增UT

在根目錄的測試指定目錄新增xx.test.js,路徑需要包含在上述files配置項中。

執行測試用例

配置package.json檔案

“scripts”:{
“unittest”:”karma start karma.config.js –single-run”
},

這樣以後就可以用npm run unittest來執行測試用例了
在專案根目錄下的命令列中執行

karma start karma.config.js

或者

karma runkarma.config.js (singleRun = true情況下)

或者:

npm run unittest

可能遇到的問題:

1)Can not load”coverage”, it is not registered!
若檢查專案目錄node_modules下面確實存在karma-coverage,則 使用-g 選項再次安裝karma和karma-coverage

2)can’t initiate module xxxx(angularjs),說明可能files的js順序有問題或者少註冊了js檔案。