Grunt task for running mocha specs in a headless browser (PhantomJS)
Pull request Compare This branch is 145 commits behind kmiyashiro:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

This is for Grunt 0.4.x, if you are using Grunt 0.3.x, use grunt-mocha 0.1.x.

0.4.0 migration details in

Automatically run client-side mocha specs via grunt/mocha/PhantomJS

For a grunt task for server-side mocha tests, see


(package/README format heavily borrowed from grunt-jasmine-task and builtin QUnit task)

Grunt plugin for running Mocha browser specs in a headless browser (PhantomJS)

Getting Started

Task config

mocha: {
    // runs all html files (except test2.html) in the test dir
    // In this example, there's only one, but you can add as many as
    // you want. You can split them up into different groups here
    // ex: admin: [ 'test/admin.html' ]
    all: [ 'test/**/!(test2).html' ],
    // Runs 'test/test2.html' with specified mocha options.
    // This variant auto-includes 'bridge.js' so you do not have
    // to include it in your HTML spec file. Instead, you must add an
    // environment check before you run `` in your HTML.
    test2: {

        // Test files
        src: [ 'example/test/test2.html' ],
        options: {
            // mocha options
            mocha: {
                ignoreLeaks: false,
                grep: 'food'

            // Indicates whether '' should be executed in 
            // 'bridge.js'. If you include `` in your html spec, you
            // must wrap it in a conditional check to not run if it is opened
            // in PhantomJS, see example/test/test2.html
            run: true

Vanilla JS

Option 1 (recommended)

  • Write mocha task description in grunt config using and specify run: true option (see example/grunt.js for details);
  • Check for PhantomJS userAgent in a test html file and run tests only in a real browser (see example/test/test2.html for details).

In this case you shouldn't include bridge.js (it will be included automatically) and tests will be run from bridge.js.

Option 2

Alternatively, include bridge.js from tasks/phantomjs after you include mocha.js and run mocha.setup in your HTML file. The helper will override mocha.setup if it detects PhantomJS. See example/test/test.html.


Mocha must be included via script tag in the header. There is no need to load Mocha via AMD. You may load other testing libs via AMD if that gives you a fuzzy feeling.

Example setup with AMD (advanced):

Grunt and this plugin

First, make sure you have grunt installed globally, npm install grunt -g

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-mocha

Then add this line to your project's grunt.js gruntfile at the bottom:


Also add this to the grunt.initConfig object in the same file:

mocha: {
  index: ['specs/index.html']

Replace specs/index.html with the location of your mocha spec running html file.

Now you can run the mocha task with grunt mocha, but it won't work. That's because you need...


This task is for running Mocha tests in a headless browser, PhantomJS. See the FAQ on how to install PhantomJS.


Use Mocha

Maybe Growl?

Growl support is optional. I'm not sure what the Windows situation is with growl.


The PhantomJS -> Grunt superdimensional conduit uses alert. If you have disabled or aliased alert in your app, this won't work. I have conveniently set a global PHANTOMJS on window so you can conditionally override alert in your app.


Copyright (c) 2012 Kelly Miyashiro Licensed under the MIT license.