karma+phantomjs+mocha+chai使用心得

前言

作为一名被逼着开发转测试，后台转前台的苦逼来说，分享一下前端js单元测试的一些使用心得。按照网上的教程来走虽然大部分能够运行，但是部分教程不适用于实际测试环境，所以我来发布一个简单的教程，方便后面的哥们能够尽快地一口吃成胖子，并且让高手来填一些奇怪的坑。

目录

1.测试组件的介绍

   2.测试环境的搭建

   3.测试案例

   4.测试覆盖

   5.坑

1.测试组件的介绍

测试组件选取karma为测试管理工具，mocha为测试库，chai为断言库，phantomjs为测试浏览器。

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

mocha：mocha是一个基于nodejs和浏览器集合的各种特性的JavaScript测试库，并且让异步测试变得简单，支持TDD(测试驱动开发)和BDD(行为驱动开发)，在测试中捕获到异常时，会给出灵活准确的报告。

chai：chai是一个基于nodejs的断言库，并且完美支持各种主流的JavaScript测试框架。

phantomjs：phantomjs是一个无页面的浏览器，由于不需要渲染页面，网页的运行时间会大大缩短，该浏览器适合用于测试。

2.测试环境搭建

首先，想要玩js测试请下载nodejs，找自己系统的对应版本，下载安装完成后windows系统下请打开cmd输入node --version，这样nodejs就会配置到环境变量中，可以直接使用。linux系统请自行将nodejs添加到自启动中。如果还不知道我在说什么或者安装完无法使用，请打开这个教程。

安装完成后，windows系统下建立一个文件夹作为测试文件夹，具体的看个人喜好。文件的结构如图

node_modules是当前项目所依赖的nodejs库，spec为测试代码，src为被测试的文件，karma.conf.js和test-main.js是karma测试管理工具自动生成的文件，package.json是依赖js库的信息。

package.json内容：

json格式的数据想必大家都懂，也就不多做介绍。nodejs使用的时候会根据package.json来安装所需要的文件，如果不写版本信息则安装该文件的默认版本。

这一步做完了，请在控制台下进入到这个文件夹，输入npm install即可，全部组件安装完成后，输入karma init，karma会自动生成一些配置信息，放到karma.conf.js，如果在init的时候选择使用requirejs，并且同意创建test-main.js作为引导文件，则会在文件夹下面生成test-main.js。karma init生成的config文件只是一个简略通用的东西，我们可以修改一下完成我们所需要的东西。

// Karma configuration
// Generated on Fri Jan 30 2015 10:47:02 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: ['mocha', 'requirejs','chai','sinon'],


    // list of files / patterns to load in the browser
    files: [
      'test-main.js',
      {pattern:'src/utils/*.js',included:true},
      {pattern:'src/apps/**/*.js',included:true},
      'spec/*.spec.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'src/apps/**/*.js':['coverage']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'],
    
    coverageReporter:{
        type:'html',
        dir:'coverage/'    
    },

    // 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
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],
    captureTimeout:60000,


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true
  });
};

这个是我使用的karma.conf.js，集成了测试中所需要的组件，并且在当前目录下自动生成测试报告。具体karma.conf.js的信息请戳 这里。

全部做完后，恭喜你你可以直接使用karma start来跑你的测试了。

3.测试案例

    首先，编写一个需要被测试的文件：

console.log("load reverse.js");
var  Reverse = function(name){
         return name.split("").reverse().join("");  
};

这个代码想必大家都看得懂，简单的反向输出。放到src文件夹下面。

然后是这个测试文件：

describe("start",function(){
    it("should return true",function(){
        expect(Reverse("abc")).to.equal("cba");
    });      
});

放到spec文件夹下面。

直接在当前文件夹下的控制台中输入karma start，即可看到成功的结果。

下面的打印请无视，这是楼主以后要写的一些BDD的坑，等待被填满。从控制台的打印结果可以看出，测试框架加载所需的东西，然后运行，如果通过则不报错，不通过的话嘛

显而易见的错误。

4.测试覆盖

如果你直接使用的我的conf文件的话，那么恭喜你，你可以在你的测试文件夹下面看到多了一个文件夹，里面放的就是当前的测试报告。直接打开index.html即可查看报告。

通过的地方呢用绿色表示，使用失败的function用黄色表示，具体失败的代码用红色表示。

5.坑

这边有2个坑，一个是文件多次执行。测试文件应该只执行一次，我这边不知道为什么执行了2次。而是文件加载问题，以前一直习惯使用require加载文件，在这个框架中使用require加载的时候会报2次加载的错误，后面发现居然可以直接在测试代码里使用所需要的东西，表示理解不能，等待高手来填满这个坑。

结束语

第一次在csdn上写博客还是有点虚的，毕竟只是个战5渣，多方搜集资料完成了这个博客的编写。感谢一下曾经的导师，指导我如何成为一名优秀的程序员，虽然目前路途遥远，不过有会成长的。

参考资料的连接：

karma和jasmine自动化单元测试。

  mocha官网。

chai官网。

   nodejs grunt karma+jasmine+require自动化测试平台快速搭建。