前端單元測試工具karma和jest

 

  1.Jasmine是一個很好的單元測試框架，它有漂亮簡單的API

  

describe('you can group test cases in "describe" blocks...', function() { 
　　　　describe('...which can also be nested', function() {
　　　　　　　　it('test cases are in "it" blocks', function() {
　　　　　　　　var string = 'where we can run arbitrary JavaScript code...'; // ...and make assertions about results using "expect": 
　　　　　　　　expect(string).toEqual('expected string');
　　　　　　}); 
　　　　});
});

　　

 Karma 是一個集成了像 Jasmine（基於 BDD 的測試框架），PhantomJS（無界面的瀏覽器）等的測試工具。

 

 npm安裝好后，就要寫karma的配置文件

 

//karma.conf.js
module.exports = function(config) { config.set({
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*_spec.js'
    ],
    preprocessors: {
      'test/**/*.js': ['jshint','browserify'],

　　　 'src/**/*.js': ['jshint','browserify']

    },

 　　　　/**

         ** ChromeDebugging,ChromeDebugging可以打開chrome devtool,出來的畫面，點擊DEBUG按鈕,調試測試用例,

         ** PhantomJS需要安裝對應的phantomjs和karma-phantomjs-laucher

         */

        browsers: ['ChromeDebugging'],

        customLaunchers: {

            ChromeDebugging: {

                base: 'Chrome',

                flags: ['--remote-debugging-port=9333']

            }

  })
}

這里定義了要測試的文件路徑，同時定義了跑測試前，一個jshint的預處理。（觸發JSHint）

//.jshintrc
{
 "browser": true,
 "browserify": true, 
 "devel": true, 
 "globals": { "jasmine": false,
　　　　　　　　"describe": false, 
　　　　　　　　"it": false,
 　　　　　　　 "expect": false, 
　　　　　　　　"beforeEach": false,
 　　　　　　　 "afterEach": false
　　　　　　 } 
}

 2. Jest是facebook后來使用的一個測試框架，集成了mocha等等，使用很方便
　　
　　

npm install -S jest jest-watch-typeahead ts-jest

      因為我要使用ts,所以多安裝了ts-jest

　　根目錄建立一個jest.config.js文件
 　

module.exports = {
  testMatch: ['<rootDir>/test/\*\*/\*.ts'],
  preset: 'ts-jest',
  testEnvironment: 'node',
};

package.json下添加腳本：

"test": "jest"

然后就可以在test文件夾下寫測試用例了