Warning: this post is old and might not reflect the current state of the art

Mocha is an awesome and versatile testing tool. There are many testing frameworks out there, and I choose Mocha because of its popularity and ease of use.

Let’s first see how to run the tests in a browser. Download

• https://github.com/mochajs/mocha
• https://github.com/chaijs/chai
• https://github.com/chaijs/chai-jquery

Put the respective mocha.js, chai.js, chai-jquery.js files in a test/ subfolder on your site.

Pick your index.html file and load them, then we’ll setup Mocha to use the BDD testing style and we’ll load in a file called test.web.js, that will host our testing rules.

<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
  mocha.setup('bdd');
  expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

Inside your body, put a div#mocha:

<div id="mocha"></div>

the test/test.web.js file is the main piece of the game, and it will host the testing rules.

describe('Array', function(){
  describe('#indexOf()', function(){
    it('should return -1 when the value is not present', function(){
      [1,2,3].indexOf(5).should.equal(-1);
      [1,2,3].indexOf(0).should.equal(-1);
    })
  })
})

describe('After this', function() {
  it('should be logged in', function(done) {
    expect($('#the-main-div')).to.exist;
    done();
  });
});

Those tests can now be run inside the browser, by opening the browser console an typing mocha.run().

This is great as while the tests run, you can watch the screen change and read the console messages.

When I wrote this, PhantomJS was the usual way to run those tests headless in the terminal. PhantomJS development is suspended, and the repo is archived.

Today you run browser tests headless in real Chrome, Firefox or WebKit. Puppeteer and Playwright drive those browsers. Testem can launch them headless too.

The problem with this approach is that you can’t programmatically execute the tests run in the real environment where they will run. That’s not really a problem when still building prototypes and developing prior to opening to the public, but when in production you don’t want to run the test suite from the browser every time you want to test. On every browser, right? Testem is made for this. It’s just a test runner, testing framework agnostic, so it can run Mocha, Jasmine, QUnit or what you use.

1. $ npm install testem -g

2. go in the test directory of your app, type $ testem

3. open the browser to the specified location to run the tests.

You can run the tests on any browser you want by launching them, or tell testem to run the tests for you by launching

$ testem -l Chrome,Safari

You can also use testem in CI (Continuous Integration) mode.

$ testem ci

this automatically launches the tests the browser specified and outputs in a format named TAP, which is readable by us humans, and can be inputted in a continuous integration server to automate the process.

Browser testing

You’ll be probably developing your site on Chrome or Firefox: their developer tools are awesome, and they help you speed up the process.

Google Chrome has separate versions you can use to test your website on. The stable and normal version, and Chrome Canary.

Canary is a browser you can run side by side with the normal Google Chrome. Its advantage is that you get daily updates of what’s committed to the Chromium sources, and you can get access to new features 11 weeks before they’re sent to the main stable Chrome channel, and file bugs if you need. You can even set it as your default browser.

Mozilla has its own Firefox Nightly that does the same thing as Chrome canary: daily updates will come to your browser.

You might want to use the Chrome Dev channel, and Firefox Beta or Developer Edition which represent a ‘less on-the-edge’ version then Canary/Nightly.

To test Safari you can use the WebKit Nightly Builds. When you use WebKit, you are basically running Safari with an updated version of the underlying engine. The current channels, including Safari Technology Preview, are in Why use a preview version of a browser?.

Want me to talk about your product? You can sponsor this site.