Tech

ES6 and TDD at work, with traceur, mocha and sinon

November 19, 2014· 3 minutes to read

It was this little itch, that I had for quite a while, but you know how it is, you never get around to scratch it.
Now was the time to do so. I had ES6 working already a couple of times using webpack but did always switch back, due to not having taken the time to get all the test setup run with it too. Which was mainly the fault of jasmine(-node) not really supporting it.

So I just have to replace it. I did with mocha. And here is how it went. Keep on reading or read it up in the project’s README.

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.

Have fun testing away with ES6. I am curious now how problematic the transpilation will make my life, let’s see.