Skip to content

Instantly share code, notes, and snippets.

@spikeheap
Last active May 24, 2017 07:59
Show Gist options
  • Save spikeheap/3dfcf46caf60bf076edc to your computer and use it in GitHub Desktop.
Save spikeheap/3dfcf46caf60bf076edc to your computer and use it in GitHub Desktop.
The most basic ES6-polyfilled test setup I can come up with

Karma, Browserify & Babelify

Do you need Promises and other ES6 goodness. This will give you polyfills for your tests, and a working Karma, Browserify & Babelify setup.

Caveats

This example has been drawn up for this StackOverflow question. You probably want to polyfill Promises, etc. unless all your supported browsers already contain it. You probably also want to keep your compilation/babelification/browserification process the same between build and test. Fortunately you can (hint: common config can live in package.json), but that's outside of the scope of this Gist.

/**
* A simple ES6 Promise
*/
'use strict';
module.exports = myFunction;
function myFunction(inputMessage){
return Promise.resolve('Received: ' + inputMessage);
}
'use strict';
describe('myFunction', function (done) {
var myFunction = require('./index');
it('returns the response', function (done) {
myFunction('Hi!').then(function(response){
expect(response).toEqual('Received: Hi!');
done();
});
});
});
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'jasmine'],
files: [
'node_modules/babelify/node_modules/babel-core/browser-polyfill.js', //Polyfills Promises
'index.js', //could be /src/**/*.js
'index.spec.js' //could be /test/**/*.spec.js
],
preprocessors: {
'index.js': ['browserify'], //src files glob
'index.spec.js': ['browserify'] //test files glob
},
browserify: {
debug: true, // for sourcemaps and easier debugging
transform: [ 'babelify' ]
},
reporters: ['progress'],
// enable / disable colors in the output (reporters and logs)
colors: true,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS2'],
});
};
{
"name": "karma-babel-example",
"version": "1.0.0",
"description": "",
"main": "./index.js",
"scripts": {
"test": "./node_modules/.bin/karma start --single-run"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babelify": "^6.1.2",
"jasmine-core": "^2.3.4",
"karma": "^0.12.37",
"karma-browserify": "^4.2.1",
"karma-jasmine": "^0.3.6",
"karma-phantomjs2-launcher": "^0.1.6"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment