单元测试（模块测试）是开发者编写的一小段代码，用于检验被测代码的一个很小的、很明确的功能是否正确。通常而言，一个单元测试是用于判断某个特定条件（或者场景）下某个特定函数的行为。
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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
原文地址：https://www.cnblogs.com/yayaxuping/p/10678436.html
时间： 2024-11-06 07:35:14