javascript - Trying to setup tests with mocha, babel & es6 modules -

i'm trying leverage grunt & babel load es6 source dependency given test. i've been running actual src , compiling app fine via browserify:

module.exports = function (grunt) {    // import dependencies   grunt.loadnpmtasks('grunt-contrib-watch');   grunt.loadnpmtasks('grunt-contrib-jshint');   grunt.loadnpmtasks('grunt-browserify');    grunt.initconfig({     browserify: {       dist: {         files: {           'www/js/bundle.js': ['src/app.js'],         },         options: {           transform: [['babelify', { optional: ['runtime'] }]],           browserifyoptions: {             debug: true           }         }       }     },     jshint : {       options : {         jshintrc : ".jshintrc",       },        dist: {         files: {           src: ["src/**/*.js"]         }       }     },     watch: {       scripts: {         files: ['src/**/*.js'],         tasks: ['jshint', 'browserify'],         options: {           atbegin: true,           spawn: true         },       },     }   });    grunt.registertask("default", ['watch']);  }; 

it compiles single bundle.js file, include in index.html file. great!

so want tests, import file i'm testing. have simple storage object called interactionstore, locationed in src/stores/interaction_store.js. have created spec file at: test/stores/interaction_store_spec.js

import expect "expect.js"; import interactionstore '../../../src/stores/interaction_store.js';  describe("interactionstore", () => {   beforeeach(() => {     interactionstore.data = [];   });   describe("#start()", () => {     ("should apped multiple", function () {       interactionstore.start();       interactionstore.start();       interactionstore.start();       expect(interactionstore.data.length).toequal(3);     });   }); }); 

so import store directly. i've added few sections grunt file test process:

module.exports = function (grunt) {    // import dependencies   grunt.loadnpmtasks('grunt-contrib-watch');   grunt.loadnpmtasks('grunt-contrib-clean');   grunt.loadnpmtasks('grunt-contrib-jshint');   grunt.loadnpmtasks('grunt-browserify');   grunt.loadnpmtasks('grunt-contrib-sass');   grunt.loadnpmtasks('grunt-mocha-test');   grunt.loadnpmtasks('grunt-babel');    grunt.initconfig({     babel: {       options: {         sourcemap: true,         modules: "common"       },       test: {         files: [{           expand: true,           cwd: 'test',           src: ['**/*.js'],           dest: 'test/compiled_specs',           ext:'.js'         }]       }     },     browserify: {       dist: {         files: {           'www/js/bundle.js': ['src/app.js'],         },         options: {           transform: [['babelify', { optional: ['runtime'] }]],           browserifyoptions: {             debug: true           }         }       }     },     clean: ["test/compiled_specs"],     jshint : {       options : {         jshintrc : ".jshintrc",       },        dist: {         files: {           src: ["src/**/*.js"]         }       }     },     watch: {       scripts: {         files: ['src/**/*.js'],         tasks: ['jshint', 'browserify:dist'],         options: {           atbegin: true,           spawn: true         },       },     },      mochatest: {       test: {         src: ['test/compiled_specs/**/*_spec.js']       }     }   });    grunt.registertask("default", ['watch']);   grunt.registertask("test", ['clean', 'babel', 'mochatest']);  }; 

babel compiles tests no problem, when run it, loads .js files in src folder in es6 still, , naturally explodes.

i managed solve original problem on reddit. instead of using mocha test, run mocha command directly:

mocha --ui tdd --compilers js:babel/register test/**/*.js 

one can add in npm script.

further more because i'm testing cordova project, needed phantom js. took figuring out well, gist here: https://gist.github.com/nmabhinandan/6c63463d9f0987020c6f. here's final setup in case interested:

folder structure:

src/   -- app code test/   spec/     stores/       interaction_store_spec   specrunner.js tests.html  module.exports = function (grunt) {    // import dependencies   grunt.loadnpmtasks('grunt-contrib-watch')   grunt.loadnpmtasks('grunt-contrib-jshint');   grunt.loadnpmtasks('grunt-browserify');   grunt.loadnpmtasks('grunt-contrib-sass');   grunt.loadnpmtasks('grunt-babel');   grunt.loadnpmtasks('grunt-exec');   grunt.loadnpmtasks('grunt-contrib-clean');    grunt.initconfig({     babel: {       options: {         sourcemap: true,         modules: "amd"       },       test: {         files: [{           expand: true,           src: ["test/**/*.js"],           dest: "dist",           ext: ".js"         }, {           expand: true,           src: ["src/**/*.js"],           dest: "dist",           ext: ".js"         }]       }     },     browserify: {       dist: {         files: {           'www/js/bundle.js': ['src/app.js'],         },         options: {           transform: [['babelify', { optional: ['runtime'] }]],           browserifyoptions: {             debug: true           }         }       }     },     clean: {       test: ["dist/test"]     },     eslint : {       target: ["src/**/*.js"]     },     exec: {       run_tests: "node_modules/.bin/mocha-phantomjs -p $(which phantomjs) tests.html"     },     sass: {       dist: {         options: {           style: 'compressed'         },         files: {           'www/css/styles.css': 'www/css/sass/styles.scss'         }       }     },     watch: {       css: {         files: ['www/css/sass/*.scss'],         tasks: ['sass']       },       scripts: {         files: ['src/**/*.js'],         tasks: ['eslint', 'browserify:dist'],         options: {           atbegin: true,           spawn: true         },       },     }   });    grunt.registertask("default", ['sass','watch']);   grunt.registertask("test", ["clean", "babel:test", "exec:run_tests"]); }; 

the important thing note gruntfile use of babel rather browserify. added mocha-phantom , requirejs support tests. watch, sass, , eslint used building source run app. babel compiles source & tests amd modules. when using requirejs, must drop extensions in import strings. works browserify, requirejs not use baseurl in specrunner if has extension.

specrunner.js:

// requirejs configuration require.config({   baseurl: 'dist/test',   urlargs: 'cb=' + math.random(),   paths: {     spec: 'spec', // lives in test directory   },   hbs: {     disablei18n: true   } });  let testsuite = {   specs: [     'spec/stores/interaction_store_spec'   ] };  // run mocha (function() {   require(testsuite.specs, function() {      if (window.mochaphantomjs) {       mochaphantomjs.run();     } else {       mocha.run();     }    }); })(); 

tests.html:

<!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/expect.js/index.js"></script>      <script>         mocha.ui('bdd');         mocha.reporter('html');     </script>     <script src="node_modules/requirejs/require.js" data-main="dist/test/specrunner"></script> </body> </html> 

package json:

{   "name": "test",   "version": "0.0.1",   "devdependencies": {     "babel": "^5.8.12",     "babel-runtime": "^5.8.12",     "babelify": "^6.1.3",     "eslint": "^0.24.1",     "expect.js": "^0.3.1",     "grunt": "^0.4.5",     "grunt-babel": "^5.0.1",     "grunt-browserify": "^3.8.0",     "grunt-contrib-clean": "^0.6.0",     "grunt-contrib-watch": "^0.6.1",     "grunt-eslint": "^16.0.0",     "grunt-exec": "^0.4.6",     "mocha": "^2.2.5",     "mocha-phantomjs": "^3.6.0",     "requirejs": "^2.1.20"   } } 

so when run grunt test or grunt babel more specifically, dist folder in root of app:

 dist/    test/      -- compiled specs    src/      -- compiled source 

and phantom runs specs fine. note you'll need have phantomjs installed through homebrew or work. used 1.9.2