How to Write a Library for Node.js and Browser with Mocha Unit Tests

Mocha is a test framework for JavaScript, it provides Node.js and browser versions. Assume we implement a JavaScript library and we want to run unit tests automatically. And also, we want that it could be used in Node.js and browsers. We can use following methods to do that.

This example files structure look like this:

src\md5.js
tests\test.js
tests\node-test.js
tests\index.html
package.json

Or refer to js-md5.

Installation

Install mocha package to your project.

1 2	npm install mocha --save-dev npm install expect.js --save-dev

If you do not initialize npm project, you can create it at first:

npm init

The package.json should look like this:

{

  "devDependencies": {
    "expect.js": "~0.3.1",
    "mocha": "~2.3.2"
  }

}

Export

We have to detect the environment is in Node.js or browser. Assume we implement a md5 fundtion:

;(function(root, undefined) {
  // ....
  if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    module.exports = md5;
  } else if(root) {
    root.md5 = md5;
  }
}(this));

Write Unit Tests

Create a test file, eg. tests/test.js and start to write our unit tests. Eg.

describe('less than 64 bytes', function() {
  it('should be successful', function() {
    expect(md5('')).to.be('d41d8cd98f00b204e9800998ecf8427e');
  });
});

Test

Node.js Test File

We create the other file for preparing to run unit test. Eg. node-test.js and add following code:

1
2
3

md5 = require('../src/md5.js');
expect = require('expect.js');
require('./test.js');

We export the methods which we used in unit test to global variables.

Run Test

We can run this command to test:

1	mocha node-test.js

We can add this command to package.json

{

  "scripts": {
    "test": "mocha tests/node-test.js"
  }

}

Now, we can run tests by:

npm test

And we can see the results like this

Run in Browsers

If you also want to run in browser, you can create a test page like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MD5</title>
  <!-- Load libraries start -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.1.0/mocha.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/expect.js/0.2.0/expect.min.js"></script>
  <!-- Load libraries  end -->
   </head>
  <body>
    <!-- Mocha initialization start -->
    <div id="mocha"></div>
    <script>
    mocha.setup('bdd');
    </script>
    <!-- Mocha initialization end -->

    <!-- Load our package and test files start -->
    <script src="../src/md5.js"></script>
    <script src="test.js"></script>
    <!-- Load our package and test files end -->

    <!-- Run tests start -->
    <script>
    mocha.checkLeaks();
    mocha.run();
    </script>
    <!-- Run tests end -->
  </body>
</html>