How to run Node.js tests in your browser with Mocha

Half a year ago, I announced consolify, a unixy JavaScript tool that let's you run your Node test suite in the browser. It uses browserify to merge your sources and wraps them up in a nicely styled web page that shows the console output. A couple of features have been added since then:

Mocha support (--mocha)
Export just the JavaScript (--js)
Source maps are now enabled by default

On this page, I will show how consolify can be used with Mocha, and how it can be integrated with other tools for headless testing.

Installing consolify

First of all, install consolify with npm:

$ npm install -g consolify

This will make the consolify command globally available. If you don't like a global install, you can also add consolify as a devDependency:

$ npm install consolify --save-dev

With a local install, you'll find the consolify command at node_modules/.bin/consolify. It's automatically available in the npm scripts as explained by @substack in his post about taks automation with npm run.

Mocha support

Mocha is a feature rich and flexible testing framwork. If you have not tried it yet, you should have a look. Mocha comes with browser support, but it requires you to build a web page that includes the Mocha JS and CSS and your test cases.

You can now let consolify generate the web page for you that runs your test cases with Mocha:

$ consolify --mocha -o test/all.html ./test/*-test.js

That's all you need. Open the generated test/all.html file in your browser to run your test suite.

Automatic page reloads

To optimize the workflow a bit, you can avoid reloading the page manually by serving the files with an http-server and by including browser-reload:

$ npm install browser-reload
$ npm install -g http-server
$ http-server &
$ consolify --mocha -o test/all.html ./test/*-test.js browser-reload

Open http://localhost:8080/test/all.html in a browser. Now every time you run the consolify command, the page will reload automatically.

Headless browser support

If you want to run your tests in a headless browser, for example on your build server, then phantomic integrates nicely with consolify. Phantomic runs scripts in a local PhantomJS installation and forwards the output to your console.

$ npm install phantomic
$ consolify --mocha --js ./test/*-test.js | phantomic

Putting it all together

Here is an example Makefile taken from one of my projects:

SHELL := /bin/bash
PATH  := node_modules/.bin:${PATH}

default: test phantom browser

tests = ./test/*-test.js
html  = test/all.html

.PHONY: test
test:
    mocha test

phantom:
    consolify --mocha --js ${tests} | phantomic

browser:
    consolify --mocha -o ${html} ${tests} browser-reload

What's coming next?

A missing feature is to print nice stack traces cross browser and utilize source-maps to fix file names and line numbers. I'd apprechiate anyones help here :)

If want to add something to the wishlist, please leave a comment below or file an issue on the consolify project page on GitHub.

Last updated: 08. Dec 2016
RSS
Tweet