How to Write a JavaScript Unit Test

Last updated 7 months ago

JavaScript Unit Test Overview

JavaScript unit tests use the following libraries by default:

  • mocha - Test framework. Docs

  • chai - Assertion library. Docs

  • sinon - Spy, stub and mock library. Docs

  • jsdom - JavaScript DOM implementation. Docs

  • rewire - Access private functions. Docs

Adding a JavaScript Unit Test

For this example we'll add a unit test for add.js which contains the following code:

add.js
function add(a,b) {
return a + b;
}
module.exports = add;

A unit test for this file could be written as follows:

var add = require('./add.js');
describe ('add()', function () {
it ('should add two numbers', function () {
expect(add(1,2)).to.equal(3);
});
});

The expect function used is from the chai assertion library.

Here's a screenshot of the test and test file:

JavaScript unit test using module.exports and require

As with any test, you'll need to add it to a requirement before you can run the test. For more information, checkout the article on Test & Requirement Basics.

Using jsdom in a Unit Test

The jsdom module is useful when the JavaScript code being tested manipulates elements on an HTML page. The HTML page can be loaded in the unit test using jsdom so that the function can be tested.

index.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>jsdom Unit Test</title>
</head>
<body>
<p id='msg'>Hello, World!</p>
</body>
</html>
module.js
function updateMsg(newMsg) {
document.getElementById('msg').innerHTML = newMsg;
}
module.exports = updateMsg;

A unit test for the updateMsg function could be written as follows:

var updateMsg = require('./module.js');
describe('updateMsg', function () {
before(function() {
return JSDOM.fromFile('index.html')
.then((dom) => {
global.window = dom.window;
global.document = window.document;
});
})
it ('updates the innerHTML of element with id "msg"', function () {
expect(document.getElementById('msg').innerHTML).to.equal('Hello, World!');
updateMsg('The new msg!');
expect(document.getElementById('msg').innerHTML).to.equal('The new msg!');
});
});

Here's a screenshot of the test and test file:

JavaScript unit test using jsdom

Using rewire in a Unit Test

The rewire module is useful when there is no module.exports in the code. In this case, the add function is private and not normally accessible outside the file. However, by using rewire, add can still be accessed and tested.

add.js
function add(a,b) {
return a + b;
}

A unit test for the private add function could be written as follows:

var module = rewire('./add.js')
var add = module.__get__('add');
describe ('add()', function () {
it ('should add two numbers', function () {
expect(add(1,2)).to.equal(3);
});
});

Here's a screenshot of the test and test file:

JavaScript unit test using rewire

Conclusion

JavaScript unit tests are a great way to test JavaScript code. Tests run using the mocha test framework and come with chai, sinon, jsdom, and rewire already installed. This allows testing a wide variety of code, from private functions, to code that accesses the DOM.