← Back home

Dev Log: Nov 15, 2016

Originally published on Medium.

WebStorm: Running Specific Tests with Mocha + Babel

Running tests from the terminal involved too many keystrokes. The team is using ES2015 with Mocha, but running tests through WebStorm failed because it didn’t recognise the syntax. Fix:

  1. Press ⌘⇧A and search for “Select Run/Debug Configuration”
  2. Click Edit configurations
  3. Under Defaults → Mocha, add to the extra Mocha options field: --compilers js:babel-core/register
  4. Apply

Now you can:

  • Position your cursor inside any describe or it block and press Ctrl⇧R to run just that test
  • Press Ctrl R to rerun the last test

Much faster feedback loop.

IE11 Compatibility View Issue

Modern JS frameworks often don’t support IE compatibility mode even when IE11 itself is the target. If users have compatibility mode enabled for legacy sites, it can silently break your app. Fix — add this to your HTML <head>:

<meta http-equiv="X-UA-Compatible" content="IE=edge;" />

Forces IE to use its highest available rendering mode regardless of compatibility settings.

Redux and IE11: Two Missing Pieces

1. Object.assign Not Supported

Redux patterns rely on Object.assign for immutable state updates, which IE11 doesn’t support natively. Install the Babel plugin:

npm install --save babel-plugin-transform-object-assign

Update .babelrc:

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-object-assign"]
}

2. Promises Not Supported

IE11 has no native Promise support. Fix with babel-polyfill:

npm install --save babel-polyfill

Update your webpack.config.js entry point to include the polyfill before your app:

var config = {
  entry: ['babel-polyfill', APP_DIR + '/App.jsx'],
  // ...
}

Both of these are easy to miss until you test in IE and everything silently breaks.