isabella232 / jasmine-browser-runner

Serve and run your Jasmine specs in a browser

jasmine-browser-runner 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 jasmine-core

or

yarn add -D jasmine-browser-runner jasmine-core

Add a spec/support/jasmine-browser.json. For example:

{
  "srcDir": "src",
  "srcFiles": [
    "**/*.?(m)js"
  ],
  "specDir": "spec",
  "specFiles": [
    "**/*[Ss]pec.?(m)js"
  ],
  "helpers": [
    "helpers/asyncAwait.js"
  ],
  "env": {
    "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.

Start the server:

npx jasmine-browser-runner serve

Run the tests in a browser (defaults to Firefox)

npx jasmine-browser-runner runSpecs

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

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

Its value can be "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.

To allow spec files to import source files via relative paths, set the specDir config field to something that's high enough up to include both spec and source files, and set srcFiles to []. You can autogenerate such a configuration by running npx jasmine-browser-runner init --esm.

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"
  ],
  // ...
}

6. 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-runner 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 });