Mocha VS Qunit
Assess Category | Assess Items | Mocha | Qunit |
---|---|---|---|
Setup | Installation | Require to install node.js and Mocha.js $ npm install mocha.js | Don't need install |
Dependency Management | Manual handle | Manual handle | |
Support AMD | Support AMD/No-AMD style | Support AMD/No-AMD style | |
Support test jQuery's features | Need to import mocha.js, mocha.css and mocha.setup('bdd'), mocha.run();in the html | Need to import qunit.js, qunit.css | |
Support server-side JavaScript | Run the test in command directly, so more fast | Run the test in browser,not frequently-used | |
Test Structure | Test Case Organization | Support modules nested describe(' ',function(){ describe(' ',function(){ }); }); | Don't support modules nested Qunit.module(' ', function(){ } ); |
Support async test | Use function done() | Use function async() | |
Readability | Use describe,it | Use module, test | |
Work with Sinon.js | Require to install sinon.js | import sinon.js | |
Assertion | Require to install chai.js or expect.js | No need to install other assertion library | |
Test Case Execution | 1 .Use Timeouts function set a test/tests pass or not 2.Use skip(),only() to run or not run a test/tests | Use skip(),only() to run or not run a test/tests | |
Reports | Test Result Report | Simple,don't display assertion result of each case | Better appreciation,display assertion result of each case |
Test Coverage Report | Use istanbul to create coverage report | ||
Integration and configuration | Integrate with Grunt | Install grunt-mocha set some configuration in Gruntfiles.js | Install grunt-qunit-junit Install grunt-qunit-istanbul set some configuration in Gruntfiles.js |
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.
-
BDD
The BDD interface provides describe(), context(), it(), specify(), before(), after(), beforeEach(), and afterEach().
context() is just an alias for describe(), and behaves the same way; it just provides a way to keep tests easier to read and organized. Similarly, specify() is an alias for it(). -
TDD
The TDD interface providessuite()
,test()
,suiteSetup()
,suiteTeardown()
,setup()
, andteardown()
: -
Qunit
The QUnit-inspired interface matches the “flat” look of QUnit, where the test suite title is simply defined before the test-cases. Like TDD, it uses
suite()
andtest()
, but resembling BDD, it also containsbefore()
,after()
,beforeEach()
, andafterEach()
. - Exports
The Exports interface is much like Mocha’s predecessor expresso. The keys before
, after
, beforeEach
, and afterEach
are special-cased, object values are suites, and function values are test-cases:
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:
-
should.js - BDD style shown throughout these docs
-
expect.js -
expect()
style assertions -
chai -
expect()
,assert()
andshould
-style assertions - better-assert - C-style self-documenting
assert()
- unexpected - “the extensible BDD assertion toolkit”
Qunit use itself assert
- ok(state, message)- deepEqual (actual, expected, message)
- notDeepEqual(actual, expected, message)
- strictEqual (actual, expected, message)
- notStrictEqual(actual, expected, message)
Report
Mocha: The browse report of mocha test is relative simple and not so beautiful.
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:
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?
Mocha is a feature-rich JavaScript test framework running on Node.js(:https://nodejs.org/en/) and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Detail:https://mochajs.orgFeature
- 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