jasmine-browser-runner

Serve and run your Jasmine specs in a browser

Usage no npm install needed!

<script type="module">
  import jasmineBrowserRunner from 'https://cdn.skypack.dev/jasmine-browser-runner';
</script>

README

Build Status

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

or

yarn add -D jasmine-browser-runner

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"
  ],
  "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 "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-runner. Currently, jasmine-browser-runner 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": [],
  // ...
}
  1. 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/));
})();
  1. Add 'spec/javascript' to the additional_paths array in config/webpacker.yml.
  2. 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"
  ],
  // ...
}
  1. 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 });