如何安装和使用Karma-Jasmine

注意：本文中出现的资料链接、karma的插件安装等，均可能需要翻$墙后才能正确执行。

Jasmine是一个JavaScript的测试工具，在Karma上运行Jasmine可完成Javascript的自动化测试、生成覆盖率报告等。本文不包含Jasmine的使用细节，这几天我会写一篇Jasmine的入门文章，有兴趣的朋友到时候可以看一下。

步骤一：安装Node.JS（版本：v0.12.4, windows-64）

Karma是运行在Node.js之上的，因此我们首先要安装node.js。到 https://nodejs.org/download/ 下载你系统所需的NodeJS版本，我下载的是windows-64位的msi版。

下载之后，双击 node-v0.12.4-x64.msi 运行并安装，这个就不赘述了， 不断下一步即可， 当然最好将目录改一下。

图1（选择安装内容，默认即可）：

步骤二：安装Karma

运行Node.js的命令行程序：Node.js command prompt：

图2（处于“开始->所有程序->Node.js”中）：

图3（我们将安装到E:\Karma路径下）：

输入命令安装Karma：

npm install karma --save-dev

图4（Karma安装完毕后）：

步骤三：安装karma-jasmine/karma-chrome-launcher插件

继续输入npm命令安装karma-jasmine、karma-chrome-launcher插件：

npm install karma-jasmine karma-chrome-launcher --save-dev

图5（karma-jasmine、karma-chrome-launcher安装完毕之后）：

步骤四：安装karma-cli

karma-cli用来简化karma的调用，安装命令如下，其中-g表示全局参数，这样今后可以非常方便的使用karma了：

npm install -g karma-cli

图6（karma-cli安装完毕之后）：

Karma-Jasmine安装完毕：

图7（安装完毕后，在E:\Karma文件夹下会有一个node_modules目录，里面包含刚才安装的karma、karma-jasmine、karma-chrome-launcher目录，当然还包含了jasmine-core目录）：

开启Karma：

输入命令：

karma start

图8（运行后如图所示出现了一行INFO信息，并没有其他提示和动作，因为此时我们没有配置karma的启动参数。后面会加入karma.conf.js，这样karma就会自动启动浏览器并执行测试用例了）：

图9（手动打开Chrome，输入localhost:9876，如果看到这个页面，证明已经安装成功）：

Karma+Jasmine配置：

执行命令init命令进行配置：

karma init

图10（所有默认配置问题）：

说明：

1. 测试框架：我们当然选jasmine

2. 是否添加Require.js插件

3. 选择浏览器： 我们选Chrome

4. 测试文件路径设置，文件可以使用通配符匹配，比如*.js匹配指定目录下所有的js文件（实际操作中发现该路径是karma.conf.js文件的相对路径，详见下面我给出的实际测试配置及说明）

5. 在测试文件路径下，需要排除的文件

6. 是否允许Karma监测文件，yes表示当测试路径下的文件变化时，Karma会自动测试

我在虚拟机上测试的例子：

图11（TestFiles和NodeJS处于E盘根目录下，karma.conf.js处于文件夹NodeJS的根目录下）：

以下是karma.conf.js的完整内容：

[html] view plain copy

  1. 1 // Karma configuration
  2. 2 // Generated on Fri May 29 2015 19:30:26 GMT+0800 (中国标准时间)
  3. 3
  4. 4 module.exports = function(config) {
  5. 5   config.set({
  6. 6
  7. 7     // base path that will be used to resolve all patterns (eg. files, exclude)
  8. 8     basePath: ‘../TestFiles‘,
  9. 9
  10. 10
  11. 11     // frameworks to use
  12. 12     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
  13. 13     frameworks: [‘jasmine‘],
  14. 14
  15. 15
  16. 16     // list of files / patterns to load in the browser
  17. 17     files: [
  18. 18       ‘*.js‘
  19. 19     ],
  20. 20
  21. 21
  22. 22     // list of files to exclude
  23. 23     exclude: [
  24. 24     ],
  25. 25
  26. 26
  27. 27     // preprocess matching files before serving them to the browser
  28. 28     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  29. 29     preprocessors: {
  30. 30     },
  31. 31
  32. 32
  33. 33     // test results reporter to use
  34. 34     // possible values: ‘dots‘, ‘progress‘
  35. 35     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  36. 36     reporters: [‘progress‘],
  37. 37
  38. 38
  39. 39     // web server port
  40. 40     port: 9876,
  41. 41
  42. 42
  43. 43     // enable / disable colors in the output (reporters and logs)
  44. 44     colors: true,
  45. 45
  46. 46
  47. 47     // level of logging
  48. 48     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
  49. 49     logLevel: config.LOG_INFO,
  50. 50
  51. 51
  52. 52     // enable / disable watching file and executing tests whenever any file changes
  53. 53     autoWatch: true,
  54. 54
  55. 55
  56. 56     // start these browsers
  57. 57     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
  58. 58     browsers: [‘Chrome‘],
  59. 59
  60. 60
  61. 61     // Continuous Integration mode
  62. 62     // if true, Karma captures browsers, runs the tests and exits
  63. 63     singleRun: false
  64. 64   });
  65. 65 };

说明：

若所有测试文件均处于同一个目录下，我们可以设置basePath（也是相对于karma.conf.js文件的相对路径），然后指定files，此时files则为basePath目录下的文件相对路径；

当然你也可以不设置basePath，直接使用相对于karma.conf.js文件的文件相对路径，如本例中，我们若保持basePath默认为空，则files配置应为：

[html] view plain copy

  1. files: [
  2. ‘../TestFiles/jasmineTest.js‘,
  3. ‘../TestFiles/test.js‘
  4. ]

test.js内容：

[html] view plain copy

  1. function TT() {
  2. return "abc";
  3. }

jasmineTest.js内容：

[html] view plain copy

  1. describe("A suite of basic functions", function () {
  2. it("test", function () {
  3. expect("abc").toEqual(TT());
  4. });
  5. });

启动Karma：

karma start karma.conf.js

由于这次加上了配置文件karma.conf.js，因此Karma会按照配置文件中指定的参数执行操作了，由于我们配置的是在Chrome中测试，因此Karma会自动启动Chrome实例，并运行测试用例：

图12（左侧的Chrome是Karma自动启动的，右侧的Node.js command prompt窗口中，最后一行显示了执行结果）：

图13（如果我们点击图12中的debug按钮，进入debug.html并按F12打开开发者工具，选择Console窗口，我们将能看到jasmine的执行日志）：

若此时，我们将jasmineTest.js中对于调用TT方法的期望值改为"abcd"（实际为"abc"）：

[html] view plain copy

  1. describe("A suite of basic functions", function () {
  2. it("test", function () {
  3. expect("abcd").toEqual(TT());
  4. });
  5. });

由于我们在karma.conf.js中设置了autoWatch为true：

autoWatch: true

Karma将自动执行测试用例，由于本例测试用例未通过，因此在屏幕上打印出了错误信息，Chrome的Console窗口中的日志信息需要刷新debug.html后显示。

图14（Karma自动检测到文件变化并自动重新执行了测试用例）：

代码覆盖率：

如果你还想查看测试的代码覆盖率，我们可以安装karma-coverage插件，安装命令为：

npm install karma-coverage

图15（安装karma-coverage的过程）：

修改karma.conf.js，增加覆盖率的配置：

图16（主要是变动了以下三个配置节点，其他的配置内容不变）：

[html] view plain copy

  1. 1     // preprocess matching files before serving them to the browser
  2. 2     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  3. 3     preprocessors: {
  4. 4         ‘../TestFiles/test.js‘:‘coverage‘
  5. 5     },
  6. 6
  7. 7
  8. 8     // test results reporter to use
  9. 9     // possible values: ‘dots‘, ‘progress‘
  10. 10     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  11. 11     reporters: [‘progress‘,‘coverage‘],
  12. 12
  13. 13     coverageReporter:{
  14. 14         type:‘html‘,
  15. 15         dir:‘../TestFiles/coverage/‘
  16. 16     },

变动如下：

  • 在reporters中增加coverage
  • preprocessors中指定js文件
  • 添加coverageReporter节点，将覆盖率报告类型type设置为html，输入目录dir指定到你希望的目录中

此时完整的karma.conf.js如下：

[html] view plain copy

  1. // Karma configuration
  2. // Generated on Fri May 29 2015 19:30:26 GMT+0800 (中国标准时间)
  3. module.exports = function(config) {
  4. config.set({
  5. // base path that will be used to resolve all patterns (eg. files, exclude)
  6. basePath: ‘‘,
  7. // frameworks to use
  8. // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
  9. frameworks: [‘jasmine‘],
  10. // list of files / patterns to load in the browser
  11. files: [
  12. ‘../TestFiles/jasmineTest.js‘,
  13. ‘../TestFiles/test.js‘
  14. ],
  15. // list of files to exclude
  16. exclude: [
  17. ],
  18. // preprocess matching files before serving them to the browser
  19. // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  20. preprocessors: {
  21. ‘../TestFiles/test.js‘:‘coverage‘
  22. },
  23. // test results reporter to use
  24. // possible values: ‘dots‘, ‘progress‘
  25. // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  26. reporters: [‘progress‘,‘coverage‘],
  27. coverageReporter:{
  28. type:‘html‘,
  29. dir:‘../TestFiles/coverage/‘
  30. },
  31. // web server port
  32. port: 9876,
  33. // enable / disable colors in the output (reporters and logs)
  34. colors: true,
  35. // level of logging
  36. // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
  37. logLevel: config.LOG_INFO,
  38. // enable / disable watching file and executing tests whenever any file changes
  39. autoWatch: true,
  40. // start these browsers
  41. // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
  42. browsers: [‘Chrome‘],
  43. // Continuous Integration mode
  44. // if true, Karma captures browsers, runs the tests and exits
  45. singleRun: false
  46. });
  47. };

执行命令：

karma start karma.conf.js

图17（执行命令后，在配置文件coverageReporter节点中指定的dir中，我们将找到生成的覆盖率报告，karma-coverage还生成了一层子文件夹，对应于执行测试的浏览器+版本号+操作系统版本）：

顶
0

踩
0
时间： 2024-11-09 01:59:14

如何安装和使用Karma-Jasmine的相关文章

使用karma+jasmine做单元测试

目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner.github.io/ Karma会启动PhantomJS实例来运行测试,可以在其上使用Jasmine.Mocha等测试框架,也可以和Jenkins.Travis等CI(Continuous Integration,持续集成)进行整合. Jasmine是一个按照BDD(behavior-driven

Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration). 这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果. 2. Karma集成Jasmine进行单元测试 a.初始化 NPM 实现初始化 NPM 包管理,创建 package.json 项目管理文件.

karma+jasmine自动化测试

1.安装nodejs,进入项目目录 2.安装karma和相关插件 npm install karma --save-dev npm install karma-jasmine karma-chrome-launcher --save-dev npm install -g karma-cli 3.执行karma start,可以看到karma会自动打开浏览器 4.进入./node_modules/karma/bin,执行karma init,就成功配置了karma自动化运行脚本 5.修改karma

.Karma+Jasmine+karma-coverage

单元测试(模块测试)是开发者编写的一小段代码,用于检验被测代码的一个很小的.很明确的功能是否正确.通常而言,一个单元测试是用于判断某个特定条件(或者场景)下某个特定函数的行为. Karma是一个基于Node.js的JavaScript测试执行过程管理工具( Test Runner )..该工具可用于测试所有主流Web浏览器, 也可集成到CI ( Continuous integration ) 工具, 也可和其他代码编辑器一起使用..这个测试工具的一个强大特性就是, 它可以监控(Watch)文件

搭建前端开发环境

采用node + grunt + bower + karma + jasmine搭建前端开发环境.(windows环境为例) 安装开发包的工具:node (安装grunt,bower,karma,karma-jasmine等开发和测试工具包) 构建工具:grunt (合并,代码检查.压缩等,以及可以插件式植入其他task) Js库依赖管理工具:bower (管理开发用到的js.css库,例如:jquery, angular,bootstrap) 测试框架:karma + jasmine 步骤一:

快速搭建angularjs测试环境以及可能遇到的问题

视频教程参考慕课网的大漠教程的第一章 http://www.imooc.com/learn/156 先安装nodeJs,nodejs.org官网上直接下载,一直next,finish 在npm的安装路径下打开命令行工具cmd npm 我的安装路径C:\Users\tchlu\AppData\Roaming\npm npm install -g gruntnpm install -g http-servernpm install -g bower 然后依次安装测试相关工具karma jasmine

Karma和Jasmine自动化单元测试

前言 在Java领域,Apache, Spring, JBoss 三大社区的开源库,包罗万象,但每个库都在其领域中都鹤立鸡群.而Nodejs中各种各样的开源库,却让人眼花缭乱,不知从何下手. Nodejs领域: Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm做nodejs的包依赖管理,bower做javascript的包依赖管理.Java领域:JUnit做单元测试, Maven自动化单元测试,统一项目管

结合angularjs，Karma和Jasmine自动化单元测试

前言 在Java领域,Apache, Spring, JBoss 三大社区的开源库,包罗万象,但每个库都在其领域中都鹤立鸡群.而Nodejs中各种各样的开源库,却让人眼花缭乱,不知从何下手. Nodejs领域: Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm做nodejs的包依赖管理,bower做javascript的包依赖管理. Java领域:JUnit做单元测试, Maven自动化单元测试,统一项目

Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透! Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代

利用Karma、Jasmine 做前端单元测试

<一> 使用技术 karma jasmine karma-coverage <二> 安装插件 1.nodejs 2.安装karma npm install -g karma npm install -g karma-cli 3.安装jasmine npm install -g jasmine 4.安装karma-coverage npm install -g karma-coverage <三>跑起一个程序 1.项目的目录结构: 2.add.js 文件 function