Tuesday, February 6, 2018

ES6, Jest, and Webstorm: Oh My! Or, fixing 'unexpected token import'

What happens when society tries to rely on arguably one of the world's worst technologies? Fragmentation.

Javascript is beyond fragmented. In any given project, you may be piecing together chunks of react, babel, gulp, webstorm, jest, jsx, webpack, less... The list goes on. All of these parts rarely play together nicely, too.

That led to a giant headache for me and thousands of other Jest users. We wrote up a file in ES6 syntax (to un-worsify the world's worst technology), and wrote an index.test.js file only to find that, oh no:

UNEXPECTED TOKEN 'import'

What's Going on?
What exactly a module is... is not exactly known. Babel isn't putting it into a format that jest is able to properly test. To fix this issue with a very barebones project structure, you need to:

yarn add jest-cli babel babel-core babel-plugin-transform-es2015-modules-commonjs 

This will install everything you need to run Jest, including the babel plugin that turns these modules into a readable format.

package.json
"jest": {
  "testEnvironment": "jsdom"},
"babel": {
  "presets": [
    "es2017"  ]
},
"scripts": {
  "test": "jest --no-cache --verbose"}

.babelrc
{
  "presets": ["es2017"],  "plugins": ["transform-es2015-modules-commonjs"]
}
Good! You now have everything that you need to do your yarn test or npm test with ES6 modules!

Take it a step further: Debug in Webstorm
Wouldn't it be absolutely awful to run a test, and have it say "cannot call function .getName of undefined"? Well, thankfully with this configuration we can properly debug.

Webstorm comes with a debug configuration called Jest. These are the settings you want:



You're all set!
Just set a breakpoint in your es6 code, and select the bug icon on the main webstorm toolbar.

babel will turn the es6 into an understandable Javascript (es3-5), the transform-es2015-modules-commonjs will turn those modules into modules that jest and browsers can understand, and the jest run configuration can talk to node over the V8 debugging protocol to let you set breakpoints.

It's kind of amazing what this hodgepodge of technology can accomplish!

5 comments:

  1. Hotmail sync related issues can arrive at any point of time. The thing is what one should do to rectify such errors. The technical team at Hotmail Customer Care Number UK is the right choice for fixing whatever error you have came across. Call them at 0800-029-4639 and ask anything you want to.

    ReplyDelete
  2. Really I enjoy your blog with an effective and useful information. Very nice post with loads of information. Thanks for sharing with us..!!.. Ruby on Rails Online Course Hyderabad

    ReplyDelete
  3. As claimed by Stanford Medical, It is in fact the one and ONLY reason women in this country get to live 10 years more and weigh on average 19 kilos lighter than we do.

    (And really, it has NOTHING to do with genetics or some secret diet and absolutely EVERYTHING about "how" they are eating.)

    BTW, I said "HOW", and not "WHAT"...

    CLICK on this link to determine if this little quiz can help you release your true weight loss potential

    ReplyDelete
  4. Je veux juste dire que j'adore votre blog. Je trouve cela vraiment utile et vous avez fait ma journée avec toutes les excellentes informations que vous partagez.

    ReplyDelete