mocha sinon traceur example

A simple example project using mocha, sinon and ES6 (by using traceur).

Install

1. Run npm install this will set up all deps this project needs
2. Run npm test and all tests should be green.

What is this an example for?

In short, it's a setup with ES6, testability and backwards compatibility in mind.

TDD with ES6

The initial pain I had was to get up to speed with ES6 (using traceur) to be compatible with all browsers. So I tried out jasmine-node with it, but failed misserably. Of course I saw mocha-traceur which seemed to make it all a breeze. But who believes documentation, right? So I had to try it. And it worked out of the box, just the way I wanted it.

I used a bit of ES6 in the initial test, just the following:

import {Some} from './test' // importing a module

describe('something', () => { // using the arrow function
  it('that should work', () => {
  });
});

traceur does support all that. Of course a traceur transpiler (setup) was needed, so I used the above mentioned mocha-traceur which just required me to run mocha --compilers js:mocha-traceur src/*.js as you find it in the package.json. This takes away the pain to manually transpile it, it always does that when the tests are run.

Of course I also made the npm test run, using just this snippet. Done.

Spying, mocking and stubbing

Next up, I wanted a solution that makes spying etc. easy. Easy for me means that it cleans up after itself. When I create a spy in a test I want it to be gone after the test, except of course I declare it in a beforeEach() (which isn't covered by this project yet).

I found mocha-sinon that claims to do it. And it does. Looking through the code and reading some docs the author states that it is also very easy to do by yourself, like so:

var sinon = require('sinon');

beforeEach(function() {
  this.sinon = sinon.sandbox.create();
});

afterEach(function(){
  this.sinon.restore();
});

Awesome, so I can reduce the overhead of another project in the setup. I put this snippet in sinon-cleanup.js and require this instead of the project itself. Thanks Elliot Foster.

Webpack and ES6

What is missing yet, is to show how to make this work in the browser. That is actually fairly easy using webpack and the es6-loader module for it.

Nice to haves

Now one could add things like:

• running it in karma and multiple browsers
• running it on some browser farm, like saucelabs
• creating a site that actually says "Hello world" to prove this setup does really work
• integrating with travis, code quality tools, etc.