| Karma, Jasmine

Karma+Jasmine单元测试入门实践

用 Jasmine 做单元测试，用 Karma 自动化完成单元测试。

概念介绍

Jasmine 测试框架（test framework）

Jasmine 官网

Jasmine是一个用于测试JavaScript代码的行为驱动开发框架。它不依赖于任何其他JavaScript框架。它不需要DOM。它具有干净，明显的语法，因此您可以轻松编写测试。

Karma 测试运行器（test runner）

Karma 官网

Karma的主要目标是为开发人员提供高效的测试环境。是开发人员避免大量配置的环境，可以编写代码并从测试中获得即时反馈的地方。

过程记录

安装Karma+Jasmine

  1. 新建文件夹

  2. 参考官网的Installation
    Karma Installation

1
2
3
4
5
6
7
8
9
10
11
# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

# Run Karma:
$ ./node_modules/karma/bin/karma start

# You will need to do this if you want to run Karma on Windows from the command line.
npm install -g karma-cli

到此为止，打开浏览器 http://localhost:9876/ 即可看到安装成功画面。

result

  1. 参考官网的Configuration
1
karma init my.conf.js

问题

报错

1
2
3
4
5
6
7
8
9
 readline.js:651
  this.line = this.line.slice(this.cursor);
                        ^

TypeError: Cannot read property 'slice' of undefined
    at Interface._deleteLineLeft (readline.js:651:25)
    at StateMachine.suggestOption (D:\code\company_id_rsa\reg-lib\node_modules\karma\lib\init\state_machine.js:53:14)
    at StateMachine.nextQuestion (D:\code\company_id_rsa\reg-lib\node_modules\karma\lib\init\state_machine.js:127:12)
    at StateMachine.process

解决方法

1
node node_modules/karma/bin/karma init

结果
karma_init

1
karma start

运行成功

编辑测试文件

  1. 新建目录结构

file_structure

  1. 修改karma.conf.js文件配置
1
2
3
4
5
// list of files / patterns to load in the browser
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],
  1. 编写文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// regFun.js
function reverse(name){
  if(name === 'AAA') return 'BBB';
  return name.split("").reverse().join("");
}

// regFunTest.js

describe("全部变量，定义测试", function() {

  beforeEach(function(){

  });

  afterEach(function(){

  });

  it("reverse word", function(){
      expect("DCBA").toBe(reverse("ABCD"));
  });
});
  1. 运行
1
karma start

点击debug按钮，并且打开控制台可以看到

karma_debug

karma-jasmine-html-reporter

karma-jasmine-html-reporter

  1. 安装
1
npm install karma-jasmine-html-reporter --save-dev
  1. 配置
1
2
3
4
5
6
// karma.conf.js
module.exports = function(config) {
  config.set({
    reporters: ['kjhtml']
  });
};
  1. 运行
1
karma start --reporters kjhtml

reporter-result

  1. addition

如果愿意的话可以在package.json中修改script

1
2
3
4
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "report": "karma start --reporters kjhtml"
  },

这样，运行npm run report就大功告成了。

ESC