Testing javascript projects with grunt, jasmine, and jshint

I maintain jasmine-jquery, a library providing jquery matchers and fixture loading for jasmine. Recently, I setup jasmine-jquery with grunt, a javascript task runner. This way, I can run the test suite from the command-line, and have continuous integration with travis-ci — so collaborators know when they broke something. In the process of setting all this up, I learned about grunt, and using grunt with jshint and jasmine.

To use grunt with jamine, jshint, and travis-ci, you need four files: package.json, Gruntfile.js, .jshintrc, and .travis.yml.

First, you need a package.json file in the root of your project. That’ll look like:

{
  ...
  , ...
  , "scripts": { "test": "grunt test" }
  , "devDependencies": {
      "grunt": "~0.4.1"
    , "grunt-contrib-jshint": "~0.6.0"
    , "grunt-contrib-jasmine": "~0.4.0"
  }
}

travis-ci runs npm test, and now npm test will run grunt test.

For grunt, you need a Gruntfile.js:

/* jshint node: true */

module.exports = function (grunt) {
  "use strict";

  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json')
    , jshint: {
        all: [
            "Gruntfile.js"
          , "lib/**/*.js"
          , "spec/**/*.js"
        ]
      , options: {
          jshintrc: '.jshintrc'
        },
      }
    , jasmine: {
        src: "lib/**/*.js"
      , options: {
          specs: "spec/**/*.js"
        , vendor: "vendor/**/*.js"
      }
    }
  })

  grunt.loadNpmTasks('grunt-contrib-jshint')
  grunt.loadNpmTasks('grunt-contrib-jasmine')

  grunt.registerTask('test', ['jshint', 'jasmine'])
  grunt.registerTask('default', ['test'])
};

See grunt-contrib-jasmine’s README for the available options you can set.

grunt test runs our test task, this checks the code’s quality with jshint, then runs the tests with jasmine. jasmine-jquery’s .jshintrc.

To setup travis-ci, you need a .travis.yml file:

language: node_js
node_js:
  - 0.8
before_script:
  - npm install -g grunt-cli

Integrate travis-ci with your project on GitHub.

Fin.


Follow me on Twitter to keep up with what I’ve learned building my personal finance tool, Stash.

Read more posts …
Written: September 3rd, 2013
Categories: javascript, jshint, grunt, jasmine, jasmine-jquery, travis-ci, github, ci, npm, node