ES6 code doesn't work?
dalanmiller opened this issue · comments
I'm having some issues running my tests that contain ES6 code? They run just fine if I open up the test.js file in say Chrome where V8 is definitely ready to handle ES6 but not in the interpreter packaged with phantomjs.
Is there anyway to make mocha-phantomjs compatible with ES6 besides pre-babelifying the test.js file?
Ah yes, phantomjs while nice, the v1 is based on QT Webkit 2.2 which is really old and has lots of basic bugs like Function#bind missing, sort sorts backwards, etc. Yup :)
PhantomJS 2 is based on QT 5 Either way, ES6 is a moving target to keep an eye on.
So yes, you'll have to use a compiler like babel to use ES6 (which it doesn't support source maps, dunno if v2 does).
Is there a way to use the mocha --compiler flag while running through mocha-phantomjs? This would make it simple to use babel, as with other mocha code:
mocha --compilers js:babel-core/register
That's for when mocha runs in Node.js. Mocha runs in the browser in phantomjs with mocha-phantomjs. If you want to bring in babel on the client side and compile your code there, that works.
Right. I was just wondering if there was a convenient way to run my tests with ES6 code without always including them in my Webpack config or setting up multiple configs for different environments (as recommended here: https://stackoverflow.com/questions/28572380/conditional-build-based-on-environment-using-webpack).
The project I'm currently working on is otherwise pretty simple, so that seemed like more of a hassle than it would be worth.
I found a solution that was less effort but still required a little bit of fiddling. Basically when testing I now run webpack with a specific NODE_ENV and conditionally include include my test files in the list of entry points.
var sources = [
'./public/js/main.js',
'./public/scss/styles.scss'
]
if (process.env.NODE_ENV === 'test') sources.push('./test/main.spec.js');
module.exports = {
cache: true,
entry: sources, // here's where that array goes
output: {
path: path.join(__dirname, 'public/dist'),
publicPath: 'dist/',
filename: 'bundle.js',
chunkFilename: '[chunkhash].js'
},
/* rest of webpack config continues below .... */Now I have this script in my package.json and can run the tests with npm test:
"test": "NODE_ENV=test node_modules/.bin/webpack && node_modules/.bin/mocha-phantomjs test.html"
This bundles my application and test code and then runs mocha-phantomjs. Note that I am using locally installed binaries in case other devs don't have webpack or mocha-phantomjs installed globally, but this command would be cleaner if I referenced the global modules instead.
My test.html does not need to explicitly include my test files now, as they are in the bundle:
<html>
<head>
<meta charset="utf-8">
<!-- encoding must be set for mocha's special characters to render properly -->
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script>
mocha.ui('tdd');
mocha.reporter('html');
</script>
<script src="public/dist/bundle.js"></script>
<script>
mocha.run()
</script>
</body>
</html>And I can use ES2015 all over the place!
I also have an npm build script where NODE_ENV is set to production, which runs webpack without including my tests.
Yup that works. #hipstertax (I pay it too sometimes :)