Using Jasmine in the browser

The jasmine-browser-runner NPM module runs your Jasmine specs in a browser. It’s suitable for interactive use with normal browsers as well as running specs in CI builds using either headless Chrome or Saucelabs.

Getting started

npm install --save-dev jasmine-browser-runner
npx jasmine-browser-runner init

or

yarn add -D jasmine-browser-runner
npx jasmine-browser-runner init

Edit spec/support/jasmine-browser.json to customize the set of source files, spec files, and helpers to be loaded. For example:

{
  "srcDir": "src",
  "srcFiles": [
    "**/*.?(m)js"
  ],
  "specDir": "spec",
  "specFiles": [
    "**/*[Ss]pec.?(m)js"
  ],
  "helpers": [
    "helpers/asyncAwait.js"
  ],
  "random": true
}

You can also use the --config option to specify a different file. This file can be a JSON file or a javascript file that exports a object that looks like the JSON above.

Running specs interactively

Start the server:

npx jasmine-browser-runner serve

Then visit http://localhost:8888/ in the browser of your choice.

Run the tests on the command line

npx jasmine-browser-runner runSpecs

The specs will be run in a browser (Firefox by default). Once the run is finished, jasmine-browser-runner will exit 0 if everything passed and nonzero if any specs failed or were filtered out.

To use a browser other than Firefox, add a browser field to jasmine-browser.json:

{
  // ...
  "browser": "chrome"
}

Its value can be "internet explorer", "firefox", "safari", "MicrosoftEdge", "chrome", or "headlessChrome".

ES module support

If a source, spec, or helper file’s name ends in .mjs, it will be loaded as an ES module rather than a regular script. Note that ES modules are not available in all browsers supported by jasmine-browser. Currently, jasmine-browser does not try to determine whether the browser supports ES modules. ES modules will silently fail to load in browsers that don’t support them. Other kinds of load-time errors are detected and reported as suite errors.

Use with Rails

You can use jasmine-browser-runner to test your Rails application’s JavaScript, whether you use the Asset Pipeline or Webpacker.

Webpacker

1. Run yarn add --dev jasmine-browser-runner.
2. Run npx jasmine-browser-runner init.
3. Edit spec/support/jasmine-browser.json as follows:

    {
      "srcDir": ".",
      "srcFiles": [],
      "specDir": "public/packs/js",
      "specFiles": [
        "specs-*.js"
      ],
      "helpers": [],
      // ...
    }
   

4. Create app/javascript/packs/specs.js (or app/javascript/packs/specs.jsx if you use JSX) as follows:

    (function() {
      'use strict';
       
      function requireAll(context) {
        context.keys().forEach(context);
      }
   
      requireAll(require.context('spec/javascript/helpers/', true, /\.js/));
      requireAll(require.context('spec/javascript/', true, /[sS]pec\.js/));
    })();
   

5. Add 'spec/javascript' to the additional_paths array in config/webpacker.yml.
6. Put your spec files in spec/javascript.

To run the specs:

1. Run bin/webpack --watch.
2. Run npx jasmine-browser-runner.
3. visit http://localhost:8888.

Asset Pipeline

1. Run yarn init if there isn’t already package.json file in the root of the Rails application.
2. Run yarn add --dev jasmine-browser-runner.
3. Run npx jasmine-browser-runner init.
4. Edit spec/support/jasmine-browser.json as follows:

    {
      "srcDir": "public/assets",
      "srcFiles": [
        "application-*.js"
      ],
      "specDir": "spec/javascript",
      "specFiles": [
        "**/*[sS]pec.?(m)js"
      ],
      "helpers": [
        "helpers/**/*.?(m)js"
      ],
      // ...
    }
   

5. Put your spec files in spec/javascript.

To run the specs:

1. Either run bundle exec rake assets:precompile or start the Rails application in an environment that’s configured to precompile assets.
2. Run npx jasmine-browser-runner.
3. Visit http://localhost:8888.

Saucelabs support

jasmine-browser can run your Jasmine specs on Saucelabs. To use Saucelabs, set browser.name, browser.useSauce, and browser.sauce in your config file as follows:

{
  // ...
  "browser": {
    "name": "safari",
    "useSauce": true,
    "sauce": {
      "browserVersion": "13",
      "os": "OS X 10.15",
      "tags": ["your tag", "your other tag"],
      "tunnelIdentifier": "tunnel ID",
      "username": "your Saucelabs username",
      "accessKey": "your Saucelabs access key"
    }
  }
}

All properties of browser.sauce are optional except for username and accessKey. It’s best to omit browser.sauce.os unless you need to run on a specific operating system. Setting browser.sauce.tunnelIdentifier is strongly recommended unless you’re sure that your account will never have more than one active tunnel.

Want more control?

var path = require('path'),
  jasmineBrowser = require('jasmine-browser-runner'),
  jasmineCore = require('../../lib/jasmine-core.js');

var config = require(path.resolve('spec/support/jasmine-browser.json'));
config.projectBaseDir = path.resolve('some/path');

jasmineBrowser.startServer(config, { port: 4321 });