Wednesday, 11 November, 2015 UTC
Summary
This guide is the third in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6.
So you’ve written a useful little app with ES6, and being the excellent developer that you are, you want to test it. You’ve got some experience testing with Mocha, so you write a few tests and run them. And bam, nothing works. Why? Because by default, Mocha only knows ES5. But luckily, teaching Mocha ES6 only takes about a minute and 30 seconds!
Dependencies
Skip this section if you’ve already installed Babel 6 and any required presets/plugins.
Babel 6 doesn’t play well with its younger self, so start by removing any older Babel packages from
package.json — babel, babel-core, etc. Make sure you npm uninstall <package-name> each one to remove them from node_modules too.We’ll need to install the
babel-core package to get access to its require hook:npm install babel-core --save-dev
Once complete, you’ll need to install the presets and plugins you want to use to transform your code. Start with
babel-preset-es2015 – Babel’s collection of ES6 transforms. If you want to use JSX in your tests, you’ll also want babel-preset-react. You can also use experimental ES7 features by adding babel-preset-stage-0, but please take a long, hard think about your life before you do.# For ES6/ES2015 support
npm install babel-preset-es2015 --save-dev
# If you want to use JSX
npm install babel-preset-react --save-dev
# If you *must* use experimental ES7 features
npm install babel-preset-stage-0 --save-dev
Of course, just having Babel’s packages installed isn’t enough. We still need to tell Babel to use them!
For the Webpack and Babel CLI episodes, we were able to do this with configuration specific to each tool. But while Mocha let’s us run our tests through Babel, it provides no way to configure it. This means we’ll need to configure Babel with a
.babelrc file in the project’s root directory:{
"presets": ["es2015"]
}
If you want to use the
react or stage-0 presets, just add them to the presets array.
Hint: Global configuration
Running ES6 tests
Unfortunately,
.babelrc is shared between all tools which can’t set their own configuration. For example, Gulp also reads .babelrc when used with a gulpfile.babel.js. Plan accordingly, and try not to put anything in there which is going to surpise you later on.
Once Babel is installed and configured, all that is left is to tell Mocha to use it!
mocha --compilers js:babel-core/register
Assuming you haven’t used any of ES6’S new built-in’s, your tests should pass with flying colours. But what if you have?
Now my tests compile, but fail?!
While the
babel-core/register script transforms your tests into ES5 JavaScript, it takes care not to change the global environment. That means that if Promise, Map, Set or Object.assign are missing from your JavaScript environment, they’ll stay missing.For testing, this has a definite upside: your tests see what the consumer sees. But maybe you’re package isn’t meant to be published, or maybe you’re testing an app instead of a library. In this case, you don’t care about the global environment. And in all likelihood, you want to use ES6 — not a confusing subset of it. So install the built-ins with
babel-polyfill:npm install babel-polyfill --save
And then require them by adding it to the top of your tests:
import 'babel-polyfill'
But keep in mind that if you’re publishing a library, this will eventually cause you to publish code which will not run on the majority of JavaScript runtimes. Loading
Tests vs Source
babel-polyfill in your tests won’t load it for your consumers too. Be careful.Talking about published code, let’s say you’re writing a library which you’d like to publish to NPM. Because you’ve done your research, you know that your published source should be ES5. And to make this happen, you’ve set up your project to compile your
src directory’s files to a lib directory before publishing.Naturally, your tests import the
lib code which you’re actually publishing, not the original src files. And while this may go without saying, make sure you compile your code before testing!Assuming you’ve followed part 1 and configured
npm run compile to compile your source, that means running your tests after the compilation step:npm run compile && mocha --compilers js:babel-core/register
Of course, even though you know you should run your tests like this, you may well forget. And that’s why you should…
Configure your tests in package.json
By adding a
test entry to the scripts object in package.json, NPM will know to run the above test command whenever we call npm test from the terminal:"scripts": {
"test": "npm run compile && mocha --compilers js:babel-core/register"
},
Hint: Upgrading from previous Babel versions
Examples
Babel 5’s
register script was located in the babel package, not the babel-core package. So if you’re upgrading, make sure to update the package name in the test script in package.json!
For an example of a package with tests run with Mocha and Babel 6, see react-pacomo.
OK, it works! But for how long?
Here’s a little story: while writing this article, I learned that the
babel-core/register script is already set to be deprecated. Babel 6 was only released a couple weeks ago and it’s already about to change. Of course, the new package isn’t in NPM yet (and thus unusable), otherwise I wouldn’t have taught you soon-to-be-outdated material.Staying up to date in our JavaScript-driven world can be tough — and that’s why I provide my Newsletter! Subscribe to receive my latest guides on writing small apps with React. And in return for your e-mail, you’ll immediately receive three bonus print-optimised PDF cheatsheets – on React (see preview), ES6 and JavaScript promises. All for free!
I will send you useful articles, cheatsheets and code.
I won't send you useless inbox filler. No spam, ever.
Thanks! Please check your email for the link to your cheatsheets.
There was an error submitting your subscription. Please try again.
First Name
Email Address
I'd like to receive the free email course.
Subscribe for free
Unsubscribe at any time.
One more thing – I love hearing your questions, offers and opinions. If you have something to say, leave a comment or send me an e-mail at [email protected]. I’m looking forward to hearing from you!
Read More
- Babel Documentation: Require Hook
- Compiling ES6 NPM packages with the Babel 6 CLI
- Using ES6 and ES7 in the Browser, with Babel 6 and Webpack
- Webpack Made Simple: Building ES6/LESS with Autorefresh
- Learn Raw React
- See compiling and testing an NPM package in action at react-pacomo
The post Testing in ES6 with Mocha and Babel 6 appeared first on James K Nelson.