Qunit acceptance test for Ember.JS app passing in browser but failing in CLI via PhantomJS

Question

I'm working through the Ember-CLI-101 ebook and have a small issue, I've gotten around to writing acceptance (integration/feature) tests and I've got a test that goes to the root path and then click a link on the header and then fill in a form.

It works when I go to http://localhost:4200/tests but when I do ember test in the CLI it fails with the following error:

actual: >
false
expected: >
true
message: >
Error: Element a[href="/friends/new"] not found.
Log: >

I assume this is some kind of PhantomJS issue with the page not loading properly but it could be anything I suppose. I'm having a hard time finding a solution on the web and would appreciate any help please.

The test:

import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from '../../helpers/start-app';

var application;

module('Acceptance | friends/new', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});

test('creating a new friend', function(assert){
  visit('/');
  click('a[href="/friends/new"]');

  andThen(function(){
    assert.equal(currentPath(), 'friends.new');
  });
  fillIn('input[placeholder="First Name"]', 'Johnny');
  fillIn('input[placeholder="Last Name"]', 'Cash');
  fillIn('input[placeholder="email"]', '[email protected]');
  fillIn('input[placeholder="twitter"]', 'jcash');
  click('input[value="Save"]');

  andThen(function(){
    assert.equal(
      currentRouteName(),
      'friends.show.index',
      'Redirects to friends.show after create'
    );
  });
});

This is the header on the page:

<nav>
  {{link-to "Ember-Borrowers" "index" class="main"}}

  <input id="bmenu" class="burgercheck" type="checkbox">
  <label for="bmenu" class="burgermenu"></label>

  <div class="menu">
    {{link-to "Dashboard" "index" class="icon-gauge"}}
    {{link-to "Friends" "friends" class="icon=users-1"}}
    {{link-to "New Friend" "friends.new" class="icon-user-add"}}
  </div>
</nav>

This is the HTML generated:

<a id="ember471" class="ember-view icon-user-add" href="/friends/new">New Friend</a>

As I say, it passes in the browser.

EDIT:

What confuses me is that the below test works fine, also clicking on a link. The difference is that this link is in the body whereas the above (failing) test's link is in the header:

test('clicking save without filling fields', function(assert){
  visit('/friends/new');
  click('input[value="Save"]');

  andThen(function(){
    assert.equal(
      currentRouteName(),
      'friends.new',
      'Stays on new page'
    );
    assert.equal(
      find("h2:contains(You have to fill in all the fields)").length,
      1,
      "displays error message"
    );
  });
});

EDIT 2:

I tried putting a link in the body of the index.html just to test if it's the header (navbar) but it still doesn't work. I used <a href="/friends/new" class="icon-user-add"></a> and still got Error: Element a[href="/friends/new"] not found.

EDIT 3:

My Git repo is here