Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ES6 code doesn't work?

See original GitHub issue

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?

Issue Analytics

State:
Created 8 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

3reactions

r4d1ncommented, Nov 19, 2015

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.

0reactions

nathanboktaecommented, Nov 20, 2015

Yup that works. #hipstertax (I pay it too sometimes 😃