前端新手使用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文件。

你可能感兴趣的:(工具类,js)