Karma和Jasmine 自动化单元测试环境搭建

最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试。自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架。

1、 karma介绍

Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma。

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

Jasmine是单元测试框架,本单将介绍用Karma让Jasmine测试自动化完成。Jasmine的介绍,请参考文章:jasmine行为驱动,测试先行

istanbul是一个单元测试代码覆盖率检查工具,可以很直观地告诉我们,单元测试对代码的控制程度。

1 安装NodeJS 以及Npm

2。全局安装Karma npm install -g karma karma安装过程中会同时安装 karma-jasmine 。karma-requirejs等模块。测试是否安装成功 只需要 在控制台 启用

karma start  会出现

在浏览器中输入 http://localhost:9876

在这里插入图片描述
3 Karma + Jasmine配置

初始化karma配置文件karma.conf.js 进入要测试文件夹 在控制台中输入karma init 一直按回车即可最终会生成一个karm-conf.js的配置文件

// Karma configuration
// Generated on Wed Oct 30 2013 16:15:24 GMT+0800 (中国标准时间)

module.exports = function(config) {
    
    
  config.set({
    
    
    // base path, that will be used to resolve files and exclude
    basePath: '',
    // frameworks to use
    frameworks: ['jasmine'],
    // list of files / patterns to load in the browser
    files: [      
    ],
    // list of files to exclude
    exclude: [     
    ],
    // test results reporter to use
    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
    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: true,
    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera (has to be installed with `npm install karma-opera-launcher`)
    // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
    // - PhantomJS
    // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
    browsers: ['Chrome'],
    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 60000,
    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false
  });
};

4 自动化测试 :三部准备工作 1、编写要测试的js文件即 功能实现js 2编写测试文件 由于我们这里使用的是jasmine 来测试,所以我们按照jasmine的语法来写就行了关于jasmine 请参考上文的连接 3 修改karma.conf.js配置文件。

在D盘根目录下新建一个文件夹 karmatest 新建一个js文件在并编写功能 Caculate.js

function add(a,b){
    
    
return a+b;
}

测试文件 test.js

describe("A suite of basic functions", function() {
    
    
    it("reverse word",function(){
    
    
        expect(add(1,2)).toEqual(3);
    });
});

修改 将karma配置文件 karm.conf.js放入karmatest文件夹下,并修改如下

module.exports = function (config) {
    
    
    config.set({
    
    
        basePath: '',
        frameworks: ['jasmine'],
        files: ['*.js'],
        exclude: ['karma.conf.js'],
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        captureTimeout: 60000,
        singleRun: false,
       
    });
};

开始运行 karma进行测试 在控制台中进入 cd karma 。运行 karma start karma.conf.js 即可开启测试。并且会自动启动 浏览器,上面配置为chrome浏览器。

如果测试通过 控制台显示如下


如果修改 测试的代码 将3改为4 控制台立刻给出错误的提示,看得出来

describe("A suite of basic functions", function() {
    
    
    it("reverse word",function(){
    
    
        expect(add(1,2)).toEqual(4);
    });
});

由于karma.conf.js配置文件中autoWatch: true, 所以test.js文件保存后,会自动执行单元测试。提示我们单元测试出错了。


karma在启动时 chrome 浏览器可能无法自动启动,这时候需要增加一个环境变量CHROME_BIN 值为chome.exe的目录。如

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe 

官方解答如下 

Chrome won’t start. (Issues: #202, #74) Set CHROME_BIN like this > export CHROME_BIN=‘C:\Program Files (x86)\Google\Chrome\Application\chrome.exe’ Increase the timeout from 5000ms to 10000ms. At 5000ms, timeouts occurred and the retry logic kicks in and eventually resolves after two to three tries.

最后:下方这份完整的【自动化测试】学习教程已经整理上传完成,朋友们如果需要可以自行免费领取 【保证100%免费】

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_53918927/article/details/129803376