JavaScript Testing: Getting started with Jasmine

JavaScript Testing: Getting started with Jasmine

posted in javascript on • last updated on

Probably the most widely used JavaScript testing framework.

This tutorial covers installation, configuration and execution only. For the Jasmine syntax, see parts 2 to 4!

Install

Add Jasmine to your project:

npm install --save-dev jasmine
./node_modules/.bin/jasmine init

You can omit the ./node_modules/.bin/ if you have Jasmine installed globally. The following code snippets will assume you did.

If you have no clue how to start, some working examples can be created with jasmine examples.

Configure

jasmine init creates ./spec/support/jasmine.json where you can configure your testing preferences. If you want to put the jasmine.json file somewhere else, you can do so by providing a value for the environment variable JASMINE_CONFIG_PATH.

{
  "spec_dir": "spec",
  "spec_files": [
    "**/*[sS]pec.js"
  ],
  "helpers": [
    "helpers/**/*.js"
  ]
}

The default Jasmine configuration makes the assumption that all tests are placed in ./spec/ and are suffixed with spec.js. Helpers (not covered here) allow you to provide custom matchers in your tests.

If you want to place your tests closer to the actual code they are testing, you can simply change spec_dir. If the source code is in ./src use the following spec_dir values:

  • src/**/spec: The tests for /src/path/to/file.js would be in /src/path/to/spec/fileSpec.js.
  • src: To place the tests in the same folder as the source files.

Note that paths in the json are relative to where jasmine init was executed.

Run

Run the tests with a simple jasmine or add to your package.json:

"scripts": {
  "test": "jasmine",
  "test:w": "nodemon --exec \"npm test\"",
  "test:alt": "jasmine JASMINE_CONFIG_PATH=spec/support/jasmine-alt.json",
  "test:cli": "jasmine --filter=\"describe and/or it\" --stop-on-failure=true --no-color --random=true -seed=7337"
},

And start once with npm test or just npm t. Or start watching with npm run test:w.

test:w(atch) requires a npm install --save-dev nodemon to work.

test:alt and test:cli demonstrate the available Jasmine CLI parameters.

Transpile

Babel

Node can handle most syntax you throw at it, but if you do use something too fancy, Babel to the rescue!

npm install --save-dev @babel/cli @babel/core @babel/node

# Add all the presets/plugins you're using
npm install --save-dev @babel/preset-env @babel/polyfill core-js

Add all the presets/plugins to your .babelrc

{
  "presets": ["@babel/preset-env"]
}

File run-jasmine.js:

import '@babel/polyfill';
import 'core-js/shim';
import Jasmine from 'jasmine';

const jasmine = new Jasmine();
jasmine.loadConfigFile('./spec/support/jasmine.json');
jasmine.execute();

The accompanying code has a working example for Babel transpilation in the babel folder.

Building and watching

package.json scripts:

"scripts": {
  // Clean generated files (requires npm i -D del-cli)
  "babel:clean": "del-cli dist",

  // Transpile to dist directory
  "babel:build": "babel babel --out-dir dist --ignore some-generated-dir/",

  // Clean, build and run jasmine
  "babel": "npm run babel:clean && npm run babel:build && node babel/dist/run-jasmine.js",

  // Watch for changes
  "babel:w": "nodemon --exec \"npm run babel\" --ignore babel/dist/"
}

TypeScript

ts-node to the rescue!
Make sure you change your jasmine.json file extensions to .ts.

npm install --save-dev jasmine @types/jasmine typescript ts-node cross-env

jasmine.json content:

{
  "spec_dir": "spec",
  "spec_files": [
    "**/*[sS]pec.ts"
  ],
  "helpers": [
    "helpers/**/*.ts"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": true,
  "reporters": [
    {
      "name": "jasmine-spec-reporter#SpecReporter",
      "options": {
        "displayStacktrace": "all"
      }
    }
  ]
}

package.json scripts:

"scripts": {
  "test": "cross-env NODE_OPTIONS=--loader=ts-node/esm jasmine",

  // -e ts: reload on file extension ts
  "test:w": "nodemon -e ts --exec \"npm test\""
}

Stuff that came into being during the making of this post
Other interesting reads
Updates
  • 28 March 2023 : jasmine-ts is deprecated. Updated to Jasmine 4.3.0.
Tags: tutorial testing