Spectacular is a BDD framework for CoffeeScript and JavaScript whose attempt to bring the power of RSpec to JavaScript. Spectacular tries to favor the best practices used for writing better RSpec tests in its design.

These are the kind of tests you can write with Spectacular:

describe Array, ->
  given 'item', -> foo: 'bar'

  it -> should exist

  itsInstance 'length', -> should equal 0

  describe '::indexOf', ->
    context 'with an item not present in the array', ->
      itsReturn with: (-> [@item]), -> should equal -1

    context 'with an item present in the array', ->
      subject 'array', -> [@item]

      specify 'the returned value', ->
        expect(@array.indexOf @item).to equal 0

Features, the short tour

  • Conditioned Specs
  • Matcher based description
  • Implicit subjects
  • Describe auto-subject
  • Factories
  • JSON and HTML fixtures (and more)
  • Promised-based tests run
  • Synchronous and asynchronous matchers
  • Synchronous and asynchronous tests
  • Browser support
  • Shared examples
  • Custom matchers
  • CSS-queries expressions to test the DOM content
  • Strings and objects diff in comparison results
  • The API is provided with both camelCase and snake_case version
  • No external dependencies in browsers



Spectacular is available as a npm module, you can then install it with:

npm install -g spectacular

This will install Spectacular globally and allow you to use the Spectacular command line tool.


First download Spectacular:

Then puts Spectacular in your html file:

<link href="build/css/spectacular.css" rel="stylesheet" type="text/css"/>
<script src="build/vendor/snap.js" type="text/javascript"/>
<script src="build/vendor/jade.js" type="text/javascript"/>
<script src="build/js/spectacular.js" type="text/javascript"/>
<script src="build/js/templates.js" type="text/javascript"/>

You can see the runner live on the Online Test Tool page.

You can pass options to spectacular by defining spectacular.options before the spectacular script node :

spectacular =
    verbose: false
    trace: true
    longTrace: false
    showSource: true
    fixturesRoot: './js/fixtures'
    globs: []

You can also pass an array containing the paths to the specs files in a spectacular.paths array.

spectacular =
  paths: ['js/specs.js']

It will allow the runner to crop the stack at the point a spec file is found and display the source of the test that failed. Errored test's stack is not cropped.

Spectacular Server

If you don't want to bother create a html file to run your test you can use the server feature of Spectacular.

By running:

spectacular server specs/**/*

You start a server that can be accessed on http://localhost:5000. It bootstrap Spectacular for you with your tests, helpers, matchers, etc.

The same server is used to run tests on PhantomJS and SlimerJS.

Source Map Support

If you use the Spectacular server to test your code on the browser, no additional configuration is needed. However, if you use Spectacular in your own test page some additional configuration is needed to enable source mapping.

In order for Spectacular to kown which files have source mapping and how to retrieve the source and the mapping for that file, some methods have to be defined in the options before the Spectacular start:

  • hasSourceMap: A function that takes an url and return true if the file have source map support.
  • getSourceURLFor: A function that takes an url and return the url of the corresponding source file.
  • getSourceMapURLFor: A function that takes an url and return the url of the json containing the source mapping.

A concrete example can be seen in the Spectacular server's source :

spectacular.options.hasSourceMap = function(file) {
  return /\.coffee$/.test(file);
spectacular.options.getSourceURLFor = function(file) {
  return file.replace('.coffee', '.coffee.src')
spectacular.options.getSourceMapURLFor = function(file) {
  return file.replace('.coffee', '.map')

Browser Support

Spectacular rely on some feature that may not be available in all browsers. You can find below the list of features and the minimum browser version needed to use them.


ECMAScript 5

Supported from the following versions:


  • 5
  • 4
  • 9
  • 11.60
  • 5.1

Mobile / Tablet

  • 0
  • 0
  • 11.50
  • 0
  • 4
  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from mdn


The most simple way to use the spectacular command line tool is as follow:

spectacular test specs/**/*.spec.js


test Runs the tests on NodeJS.
server Starts a server. The specs can then be accessed from a browser at the the following address: http://localhost:5000. The default port can be changed by setting the PORT environment variable.
phantomjs Assuming you have PhantomJS installed, it starts a server and run the test on PhantomJS.
slimerjs Assuming you have SlimerJS installed, it starts a server and run the test on SlimerJS.


-c, --coffee Add support for CoffeeScript files. You can now run your specs with: spectacular --coffee specs/**/*.coffee.
-f, --format Select the console output format (progress|documentation).
-r, --require PATH Adds PATH to the array of paths to includes.
-v, --verbose Enable verbose output.
-t, --trace Enable stack trace report for failures (default is true).
--long-trace By default the stack traces are cropped after 6 lines to limit the amount of output. You can display the full stack trace with this option.
-p, --profile Add a report with the 10 slowest examples at the end of the output.
-d, --documentation Use --format=documentation option instead.
-s, --server Use the server command instead.
--phantomjs Use the phantomjs command instead.
--phantomjs-bin PATH Pass the path to the PhantomJS binary.
--slimerjs-bin PATH Pass the path to the SlimerJS binary.
--source GLOB When using the server, it allow to add files that matches the patterns as served files in the html runner. You can use this option as many times as you need.
--map, --source-map Enable the support for CoffeeScript source map on both node and browsers. When using this mode with the browser without relying on the Spectacular server additional setup is required, please see the Source Map Support section for details.
-m, --matchers PATH Use --require PATH instead.
--helpers PATH Use --require PATH instead.
--fixtures PATH Specify the path where project fixtures can be found, by default fixtures are loaded from ./specs/support/fixtures.
--no-trace Remove stack trace from failures reports.
--random Enable tests randomization.
--no-random Disable tests randomization.
--seed INT Sets the seed for the tests randomization.
--colors Enable coloring of the output.
--no-colors Disable coloring of the output.
--no-matchers Don't require your matchers instead.
--no-helpers Don't require your helpers instead.

Options can also be defined in a .spectacular file at the root of your project.