Automatically Reload the Browser for Javascript Tests

Dylan Griffin

Fast tests mean a fast feedback loop when doing TDD. Let’s make our tests fast with Guard.

A Jasmine spec in CoffeeScript:

describe 'A suite', ->
  it 'contains spec with an expectation', ->
    expect(true).toBe(true)

Gemfile:

source 'https://rubygems.org'

gem 'jasmine'
gem 'guard'
gem 'guard-coffeescript'
gem 'guard-livereload'

Guardfile:

guard :coffeescript, output: 'javascripts' do
  watch(%r{^src/(.*)\.coffee})
end

guard :coffeescript, output: 'spec/javascripts' do
  watch(%r{^spec/src/(.*)\.coffee})
end

guard 'livereload' do
  watch(%r{^spec/javascripts/.*/(.*)\.js})
  watch(%r{^spec/javascripts/(.*)\.js})
  watch(%r{^javascripts/.*/(.*)\.js})
  watch(%r{^javascripts/(.*)\.js})
end

This compiles CoffeeScript, watches our specs or Javascript files for changes, and reloads our browser automatically.

Start a jasmine server:

rake jasmine

Visit localhost:8888. See the results of the specs.

Change the specs or Javascript files and the browser will automatically reload.

About thoughtbot

We've been helping engineering teams deliver exceptional products for over 20 years. Our designers, developers, and product managers work closely with teams to solve your toughest software challenges through collaborative design and development. Learn more about us.