Compare

Install

Mocha need to install but Qunit needn‘t.

Mocha:

• • install node.js(Download::https://nodejs.org/en/)
  • install mocha
  • global install: $ npm install --global mocha
  • Install in your development project
  • :Cd to your project directory : 
  • $ npm install mocha

 Qunit:
       Import qunit.js

Test Grammar 

　　Mocha has difference interfaces so it has more test style,BDD, TDD, QUnit, Export and Require-style.

Assertion

Mocha: According to different require mocha could install different assertion, like chai.js, shoud.js, expect.js, best-assert,…

Mocha allows you to use any assertion library you wish,  we’re using Node.js’ built-in it. you can use libraries such as:

1. should.js - BDD style shown throughout these docs

    Click here to expand...

   $ npm install should
   var should = require(‘should‘);
   (5).should.be.exactly(5).and.be.a.Number();
   var should = require(‘should/as-function‘);
   should(10).be.exactly(5).and.be.a.Number()

2. expect.js - expect() style assertions

    Click here to expand...

   $ npm install chai.js
   var expect = require(‘expect.js‘);
   ok
   expect().to.be.ok();
   expect().to.not.be.ok();
   be/equal
   expect().to.be();

3. chai - expect(), assert() and should-style assertions

    Click here to expand...

   $ npm install chai
   var chai = require(‘chai‘)
   , expect = chai.expect
   , should = chai.should();
   , assert = chai.assert;
   Var foo = ‘bar‘;
   assert.equal(foo, ‘bar‘, ‘foo equal bar‘);
   expect(foo).to.equal(‘bar‘);
   foo.should.equal(‘bar‘);
4. better-assert - C-style self-documenting assert()
5. unexpected - “the extensible BDD assertion toolkit”

Qunit use itself assert

Report　　

Mocha: The browse report of mocha test is relative simple and not so beautiful.

Qunit test report is relative more beautiful and clear, we could through the select box run the test case which we want. Another, the report will list all the assert of each case.

Asynchronous code

Testing asynchronous code with Mocha could not be simpler! Simply invoke the callback when your test is complete. By adding a callback (usually named done) to it(), Mocha will know that it should wait for this function to be called to complete the test.

describe(‘User‘, function() {
  describe(‘#save()‘, function() {
    it(‘should save without error‘, function(done) {
      var user = new User(‘Luna‘);
      user.save(done);
    });
  });
});

Qunit use async to wait for asynchronous operation and it often use with setTimeout function.

QUnit.test( "assert.async() test", function( assert ) {
var done = assert.async();
var input = $( "#test-input" ).focus();
    setTimeout(function() {
        assert.equal( document.activeElement, input[0], "Input was focused" );
 done();
    });
});

Test jQuery‘s features

Mocha： Run mocha test in browse need set below

    1. Create test folder

    2. $ mocha init test

       Will create four file:index.html, test.js, mocha.js and mocha.css

       The index.html will include:
       
     3. Import the files which we needs like the tested js, the dependence,etc.

Qunit: Just need to import qunit.js, qunit.css, the tested js file and other dependence.

Test server-side JavaScript

Mocha: No need browse and could  run the test with command and run very fast, $ npm test

Qunit: Run test with browse, so need more time.

Test control

Mocha could use the Timeouts function to control a test case run time and if the time out of the time,it will failed.But qunit don‘t have this function.

describe(‘a suite of tests‘, function() {
      this.timeout(500);
      it(‘should take less than 500ms‘, function (done) {
            //if the case take more than 500ms it will fail
       });
});

Qunit don‘t have this function.

Integrate with Grunt

Mocha:grunt-mocha: To run mocha test in grunt; grunt-mocha-istanbul: To code coverage for JavaScript Code.

Gruntfile.js

　　grunt.initConfig({

     　　pkg: pkgJson,

           　　mocha:{

            　　test:{
               　　src:[‘<%= pkg.projectFiles.mochaTests %>‘]
            　　}
        　　},

    　　grunt.loadNpmTasks(‘grunt-mocha‘);

    　　grunt.registerTask(‘test‘, mocha);

　　}

Qunit: grunt-qunit-junit: To run qunit test in grunt; grunt-qunit-istanbul: To code coverage for JavaScript Code.

Gruntfile.js

grunt.initConfig({

        pkg: pkgJson,
        qunit_junit: {
            options: {    
               dest: qunitJunitReportPath
  }
        },
        qunit: {
            options: {
                 console: false,
                 timeout: 10000,
                 coverage: {
                    disposeCollector: true,
                    src: ‘<%= pkg.projectFiles.javascript %>‘,
                    htmlReport: qunitHtmlReportPath,
                    coberturaReport: qunitCoberturaReportPath,
                    cloverReport: qunitCloverReportPath,
                    jsonSummaryReport: qunitJsonSummaryReportPath,
                    instrumentedFiles: tempPath,
                    reportOnFail: true,
                    coverageTempPath: coverageTempPath,
                    linesThresholdPct: ‘<%= pkg.coverageThreshold %>‘,
                    branchesThresholdPct: ‘<%= pkg.branchCoverageThreshold %>‘
 }
             },
             all: ‘<%= pkg.projectFiles.qunitTests %>‘
 }

            grunt.loadNpmTasks(‘grunt-qunit-istanbul‘);

      grunt.loadNpmTasks(‘grunt-qunit-junit‘);

}

Summary

Mocha test server-side common and run with command, so it faster

For reservation js is tendency ui and the two frame run broswer test has no obvious difference of speed, another our framework has complete configuration of Qunit,

What is mocha?

Feature

- Open Source Framework 
- Started in Node 
- Supports both client-side and server-side testing 
- Supports both BDD and TDD style tests 
- Supports both command line and browser 
- Supports any JavaScript assertion library (YUI Port, expect.js, should.js, jshould.js, assert.js, chai.js) 
- Supports asynchronous testing 
- Requires an assertion library

What is QUnit? 

A JavaScript Unit Testing framework. QUnit is a powerful, easy-to-use JavaScript unit testing framework. It‘s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code.Detail:http://qunitjs.com/ 

Feature 

- Similar to server-side frameworks(JUnit, Nunit)
- Built by the jQuery team
- Used to test jQuery‘s features
- No dependencies
- Can test server-side JavaScript