Previously I showed how to write application code using ES6, but wouldn't it be nice to use ES6 when writing unit tests as well? In the following post I will demonstrate how to write Jasmine tests using ES6 syntax.

Setting up the test environment is fairly easy, but to move things along I've included my sample package.json configuration

package.json

{ "scripts": { "tests": "karma start" }, "devDependencies": { "babel-loader": "^5.0.0", "webpack": "^1.8.4", "jasmine-core": "^2.2.0", "karma": "^0.13.2", "karma-jasmine": "^0.3.5", "jasmine": "^2.2.1", "karma-phantomjs-launcher": "^0.1.4", "karma-webpack": "^1.6.0" } }

I will be using Karma to run the tests, so the next step is to add a karma.config.js file to your project.

karma.config.js

module.exports = function(config) { config.set({ browsers: ['PhantomJS'], files: [ { pattern: 'test-context.js', watched: false } ], frameworks: ['jasmine'], preprocessors: { 'test-context.js': ['webpack'] }, webpack: { module: { loaders: [ { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' } ] }, watch: true }, webpackServer: { noInfo: true } }); };

I have chosen to run my tests using PhantomJS – a headless browser ideal for these types of tasks.

Babel is used for transpiling ES6 to ES5.

The last bit of plumbing is to add test-context.js to your project:

test-context.js

var context = require.context('./source', true, /-spec\.js$/); context.keys().forEach(context);

This is where you tell the test runner where your files are located. Based on the configuration above my test files are located in ./source and they all end in -spec.js. The extra boolean flag indicates if you want it to go looking for files in subdirectories under ./source.

context.keys contains an array of test files.

Now that the environment is bootstrapped it's time to write some tests!

To keep it simple we will be writing tests for a simple calculator implementation.

calculator.js

export class Calculator{ add(op1,op2){ return op1 + op2; } subtract(op1,op2){ return op1 - op2; } }

The calculator supports adding and subtracting so we will write a test for both operations.

calculator-spec.js

import {Calculator} from './calculator'; describe('Calculator', () => { it('should add two numbers', () => { let calculator = new Calculator(); let sum = calculator.add(1,4); expect(sum).toBe(5); }); it('should subtract two numbers', () => { let calculator = new Calculator(); let sum = calculator.subtract(4,1); expect(sum).toBe(3); }); });

As you can tell the Jasmine tests are all defined using ES6.

Earlier we defined a task for running the tests, so to kick off the tests, simply execute the following command:

npm run tests

Sources

I found the following article to be very helpful when playing around with this:

http://kentor.me/posts/testing-react-and-flux-applications-with-karma-and-webpack/

I have put the code up on Github