.Karma+Jasmine+karma-coverage

Posted 2021-02-15 yayaxuping

单元测试（模块测试）是开发者编写的一小段代码，用于检验被测代码的一个很小的、很明确的功能是否正确。通常而言，一个单元测试是用于判断某个特定条件（或者场景）下某个特定函数的行为。

Karma是一个基于Node.js的javascript测试执行过程管理工具( Test Runner ).。该工具可用于测试所有主流Web浏览器, 也可集成到CI ( Continuous integration ) 工具, 也可和其他代码编辑器一起使用.。这个测试工具的一个强大特性就是, 它可以监控(Watch)文件的变化, 然后自行执行。

jasmine 是一个行为驱动开发(TDD)测试框架， 一个js测试框架，它不依赖于浏览器、dom或其他js框架。具体语法参照：官方api。

1.1 使用 Karma 对代码进行单元测试，首先需要安装一系列的相关插件。

创建fetest的文件夹，并进入

安装karma

npm install -g karma-cli复制代码

npm install karma --save-dev复制代码

安装各种相关的插件

npm install karma-jasmine karma-phantomjs-launcher jasmine-core --save-dev 复制代码

初始化,整体的配置选项如下：

 

 

 

 

karma init 复制代码

Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine  Do you want to use Require.js ? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question. > no  Do you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next question. > PhantomJS > What is the location of your source and test files ? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Enter empty string to move to the next question. >  Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. "**/*.swp". Enter empty string to move to the next question. >  Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options. > no复制代码

启动karma

 

 

 

 

karma start复制代码

出现一下界面代表成功，可进行下一步操作，第一次需要安装phantomjs

 

 

 

 

npm install -g phantomjs复制代码

初始化完成之后，会在我们的项目中生成一个 karma.conf.js 文件，这个文件就是 Karma 的配置文件。

// Karma configuration // Generated on Sat Jun 02 2018 11:06:15 GMT+0800 (中国标准时间)  module.exports = function(config) {   config.set({      // base path that will be used to resolve all patterns (eg. files, exclude)     basePath: ‘‘,       // frameworks to use     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter     frameworks: [‘jasmine‘], //使用何种断言库       // list of files / patterns to load in the browser     files: [        ‘./unit/**/*.js‘,     //被测试的代码路径        ‘./unit/**/*.spec.js‘ //测试代码路径     ],       // list of files / patterns to exclude     exclude: [     ],       // preprocess matching files before serving them to the browser     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor     preprocessors: {     },       // test results reporter to use     // possible values: ‘dots‘, ‘progress‘     // available reporters: https://npmjs.org/browse/keyword/karma-reporter     reporters: [‘progress‘],      // web server port     port: 9876,       // enable / disable colors in the output (reporters and logs)     colors: true,       // level of logging     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG     logLevel: config.LOG_INFO,       // enable / disable watching file and executing tests whenever any file changes     autoWatch: false,       // start these browsers     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher     browsers: [‘PhantomJS‘],       // Continuous Integration mode     // if true, Karma captures browsers, runs the tests and exits     singleRun: true,//执行完是否退出      // Concurrency level     // how many browser should be started simultaneous     concurrency: Infinity   }) }复制代码

创建unit文件夹，并创建index.js、index.spec.js

index.js

function add (num){     if(num == 1){         return 1;     }else{         return num+1;     }  }复制代码

index.spec.js

describe("测试简单基本函数", function() {     it("+1测试", function() {         expect(add(1)).toBe(1);         expect(add(2)).toBe(5);     }); });复制代码

启动karma

 

 

 

 

karma start复制代码

成功了一个，错误一个。

1.2 使用 karma-coverage测试代码覆盖率

安装karma-coverage

 

 

 

 

npm install karma-coverage --save-dev复制代码

创建一个docs文件夹，用来存放生成的的测试文件，配置 karma.conf.js 文件：

// Karma configuration // Generated on Sat Jun 02 2018 19:49:27 GMT+0800 (中国标准时间)  module.exports = function(config) {   config.set({      // base path that will be used to resolve all patterns (eg. files, exclude)     basePath: ‘‘,       // frameworks to use     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter     frameworks: [‘jasmine‘],       // list of files / patterns to load in the browser     files: [         ‘./unit/**/*.js‘,         ‘./unit/**/*.spec.js‘     ],       // list of files / patterns to exclude     exclude: [     ],       // preprocess matching files before serving them to the browser     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor     preprocessors: {         ‘unit/**/*.js‘: [‘coverage‘]//对那些文件生成代码覆盖率检查      },       // test results reporter to use     // possible values: ‘dots‘, ‘progress‘     // available reporters: https://npmjs.org/browse/keyword/karma-reporter      reporters: [‘progress‘,‘coverage‘],//添加‘coverage‘      coverageReporter: {           type : ‘html‘,           //生成html页面           dir : ‘./docs/coverage/‘ //存放html页面位置     },      // web server port     port: 9876,       // enable / disable colors in the output (reporters and logs)     colors: true,       // level of logging     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG     logLevel: config.LOG_INFO,       // enable / disable watching file and executing tests whenever any file changes     autoWatch: false,       // start these browsers     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher     browsers: [‘PhantomJS‘],       // Continuous Integration mode     // if true, Karma captures browsers, runs the tests and exits     singleRun: true,      // Concurrency level     // how many browser should be started simultaneous     concurrency: Infinity   }) } 复制代码

启动karma

 

 

 

 

karma start复制代码

会在docs中生成一个coverage文件夹，里面有生成的测试代码覆盖率的可视化html页面。

打开index.html

修改index.spec.js

describe("测试简单基本函数", function() {     it("+1测试", function() {         expect(add(1)).toBe(1);     }); });复制代码

karma start复制代码

作者：eternalless
链接：https://juejin.im/post/5b13526d6fb9a01e831461e6
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。