Skip to content

Instantly share code, notes, and snippets.

@nmabhinandan
Last active April 28, 2017 15:45
Show Gist options
  • Save nmabhinandan/6c63463d9f0987020c6f to your computer and use it in GitHub Desktop.
Save nmabhinandan/6c63463d9f0987020c6f to your computer and use it in GitHub Desktop.
Testing ES6 using Mocha by transpiling (using babel) into AMD(RequireJS) on PhantomJS.
language: node_js
node_js:
- '0.10'
- '0.11'
- '0.12'
- 'iojs-v1.7.1'
matrix:
allow_failures:
- node_js: 'iojs-v1.7.1' # duh
sudo: false # makes tests faster
before_script:
- phantomjs --version
- npm install -g bower
- bower install -f

This is my setup to write and test ES6 code today.

Programs I use:

Directory structure

├── bower.json
├── dist
│   ├── script.js
│   ├── script.js.map
│   └── tests
│       ├── spec
│       │   ├── exampleTest.js
│       │   └── testSuite.js
│       └── SpecRunner.js
├── gulpfile.js
├── package.json
├── src
│   ├── script.es6
│   └── tests
│       ├── spec
│       │   ├── exampleTest.es6
│       │   └── testSuite.es6
│       └── SpecRunner.es6
└── tests.html
import Script from '../../script';
describe('Example tests', function() {
let script = new Script(); //it works
it('should pass', function() {
epect(true).to.equal(true);
});
});
var gulp = require('gulp');
var babel = require('gulp-babel');
var sourcemaps = require("gulp-sourcemaps");
gulp.task('tests', function() {
return gulp.src('src/tests/**/*es6')
.pipe(babel({
modules: 'amd'
}))
.pipe(gulp.dest('dist/tests'));
});
...
{
"name": "",
"version": "0.0.1",
"description": "",
"scripts": {
"test": "node_modules/.bin/mocha-phantomjs -p $(which phantomjs) tests.html"
},
"devDependencies": {
"mocha-phantomjs": "^3.5.3",
"babel": "^5.1.9",
"chai": "^2.2.0",
"gulp": "^3.8.11",
"gulp-babel": "^5.1.0",
"gulp-sourcemaps": "^1.5.1",
"mocha": "^2.2.4",
"sinon": "^1.14.1"
}
}
// RequireJS configuration
require.config({
baseUrl: 'dist/tests',
urlArgs: 'cb=' + Math.random(),
paths: {
spec: 'spec', // lives in the test directory
},
hbs: {
disableI18n: true
}
});
import {testSuite} from 'spec/testSuite';
// run mocha
(function() {
require(testSuite.specs, function() {
if (window.mochaPhantomJS) {
mochaPhantomJS.run();
} else {
mocha.run();
}
});
})();
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mocha Spec Runner</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script src="node_modules/sinon/pkg/sinon.js"></script>
<script>
mocha.ui('bdd');
mocha.reporter('html');
var expect = chai.expect;
</script>
<script src="bower_components/requirejs/require.js" data-main="dist/tests/SpecRunner"></script>
</body>
</html>
let testSuite = {
specs: [
'spec/exampleTest'
]
};
export {testSuite};
@agmcleod
Copy link

Just wanted to say thanks for this. I had to do a couple things differently as im using grunt, but my setup is pretty much the same. Important note for others that look at this. Be sure to compile your source as AMD as well into the dist folder. I have src & tests separate, so that threw me off. Also avoid using extensions in your imports, requirejs wont use the baseUrl for them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment