Grunt times out while running jasmine tests

Question

I am trying to learn to use Grunt...

When I run the following tests in the Jasmine spec runner:

http://memory-card-game.herokuapp.com/spec-runner.html

They work... it takes time because the last test plays the entire game. I upped the timeout for that test to 60000, and it works in Jasmine

But when I try to run the tests using Grunt, it does not allow the playing the game test to finish. How can I up the PhantomJS timeout to allow this test enough time to complete?

Game Card
   ✓ can be created with a value   
   ✓ has a DOM element for the card   
   ✓ can flip   
   ✓ can be discarded   
 Game Deck
   ✓ can be created   
   ✓ can hold cards   
   ✓ can shuffle   
 Event Caller
   ✓ can be created   
   ✓ can be inherited   
   ✓ should add subscribers   
   ✓ should remove subscribers   
   ✓ should emit events   
   ✓ should emit with arguments   
 Memory Game
   Starting the Game
     ✓ should be able to create a new game   
     ✓ should deal the game cards to a DOM Element   
     ✓ should emit 'deal' event   
     ✓ should deal shuffled cards   
     ✓ should be able to create a game in debug mode   
   Playing the Game
     ✓ should be able to flip over one card   
     flipping over two cards
       ✓ should emit 'match' event   
       ✓ should flip over mismatched cards   
       ✓ should remove matched cards   
       ✓ should not allow a third card flip   
   Ending the Game
     - should emit 'end' event...
Warning: PhantomJS timed out, possibly due to an unfinished async spec. Use --force to continue.

Grunt File:

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        jasmine: {
            src: ["public/js/*.js", "!public/js/main.js"],
            timeout: 60000,
            options: {
                specs: "public/test/*-spec.js"
            },
            phantomjs : {
                resourceTimeout : 60000
            }
        }
    });
    grunt.loadNpmTasks("grunt-contrib-jasmine");
    grunt.registerTask("test", ["jasmine"]);
    grunt.registerTask("default", ["test"]);
};

Answer 1

I had a similar problem. In my case I was creating a dynamic HTML using innerHTML. I replaced innerHTML for fixtures and problem solved.

Answer 2

I've been working to fix a similar problem related to the Warning: PhantomJS timed out, possibly due to an unfinished async spec. Use --force to continue error.

I'd thought this was due the Jasmine async tests we had been using combined with PhantomJS / Grunt / grunt-contrib-jasmine. But after a LOT of time and investigation I found it was related to the way some of our tests were being cleaned up:

afterEach(function () {
    $body.empty();
});

In this instance we were emptying all the elements injected into the DOM for the test. But this doesn't unbind all the JS code which lingers in the background and causes PhantomJS to eventually timeout. This blocked further Grunt tasks from running reports.

This is the better technique:

afterEach(function () {
    $element.remove();
    $nav.remove();
});

Elements added to the DOM should be removed individually to ensure all the JS associated with them is properly removed and cleaned up, ready for the next spec.

This meant we could have a large stack of 77 specs complete without PhantomJS timing out.