Published 2020-08-29 by Daniel Bark

The story of my worst Javascript bug

Lets get some context before we dig into the code.
I am Daniel, a Swedish webdev with about 6 years of development experience at the time. Here’s what i went through…

I was setting up a new Node project like many times before. This time i was going to be pragmatic about testing. Yeah, the usual mindset when starting a new project.

I created a repo, did a npm init and installed my first dev dependencies. I went for Jest and babel-jest along with it. I configured babel with @babel/preset-env. @babel/preset-env takes any target environments you’ve specified and checks them against its mappings to compile a list of plugins and passes it to Babel. Great! Modern Javascript is the way to fly.

I created an index.js file and added a simple function to it. I looked online for a small fun function. I didn’t find a fun one. Instead i went for this one.

Now I wanted to make sure Jest worked so i created a index.spec.js and added a first test:

I don’t have to tell you it didn’t work. Do you see why?

No you can’t and neither did I!

At least Jest gave me a syntax error:

Ah ok so probably there is a Babel error? Node does not understand the spread syntax of ES6. I guess I have to add babel plugins to support spread syntax?

In the following 2 hours I tried all possible ways of configuring Babel and Jest. I tried adding things from popular Node with Jest boilerplates and even Webpack boilerplates but I always got to the same error.

At this point I wanted to try a function without the spread syntax just to see something work on my computer before giving up my career as a developer.

I went to delete the 3 spread dots and was very confused to see that all 3 disappeared with just one hard punch on my backspace button. I reversed the deletion to have a closer look. The 3 dots seem to be in only one character and now my brain clicked.

The special unicode character “Horizontal ellipsis” had cost me hours.

Damn you “Horizontal ellipsis”.

I went on a deep dive into special unicode characters and here are some of the the unicode characters from hell that can mess up your whole day:

For me the problem was that I was looking for Babel errors, not syntax errors and the only way for me to detect this syntax error was that the 3 dots were a bit smaller and a bit tighter together than usual.

Im happy to have shared this with you so that you leap no risk of getting confused the same way I was.

Hope you enjoyed the read!

If you also like code content in video format check out my youtube channel: @danielbark

Written by Daniel Bark