The Debugging Diaries: Javascript Testing with PhantomJS

The Flatiron School uses a test-driven learning process. For each lesson, students are given a set of tests and write their code to make the tests pass. Once the tests pass, you pass the lesson.

In this particular lesson, I was working with Javascript, and it was going swimmingly right up until I tried to run my tests.

I had two options for running the Jasmine tests:

  1. I could run my code and the tests in Chrome by using the command learn -b.
  2. I could run the tests with PhantomJS, a “headless” browser and the default runner for Jasmine tests, using the command learn.

I was using learn -b to run the tests in the browser, and finally got them all passing. After doing a short victory dance, I remembered I still needed to run them using learn (aka with PhantomJS)…

They all failed. Every last one.

I was floored. I ran them in the browser again — all passing! I ran them using PhantomJS again, and my terminal did the computer equivalent of flipping me the bird.

There were no errors in the browser console, so I felt I could safely rule out typos and simple syntax errors. I started refactoring and rephrasing things, checking that all my variables were declared with appropriate scope and using debugger to check return values.

I came up empty-handed. Apparently Jasmine and/or PhantomJS had a personal grudge against me.

I compared notes with another student. His code looked more or less identical to mine, except instead of string interpolation:

var value = "This is a";
var string = `${value} string`;
<< "This is a string"

He used concatenation:

var value = "This is a";
var string = value + " string";
<< "This is a string"

Somewhat suspicious, I made the changes to my code and ran learn.

It worked! But why?

This turned out to be a surprisingly tricky error to research. After some intense dives into the Mozilla Developer Network and googling various combinations of “Javascript Jasmine PhantomJS string interpolation fail”, I started to find some StackOverflow answers that pointed me in the right direction.

As a relative newcomer to Javascript, I hadn’t realized that string interpolation was a brand new feature of the language, courtesy of the ES6 release in 2015. And as it turns out, PhantomJS hasn’t yet been updated to support ES6 syntax. In PhantomJS, my fancy string interpolation pretty much did this:

…which was a bummer, since string interpolation is much nicer to work with than string concatenation. But armed with the ES6 feature list, I was ready to tackle this problem when it showed up again.

The 2.5 release of PhantomJS is scheduled to add support for ES6. All rejoice!