JavaScript — Integrating Jasmine with RequireJs (AMD)

Gerard Sans
Jan 22, 2015 · 3 min read

How to use RequireJs with Jasmine 2.x

Image for post
Image for post
thedotisblack

This article will go through the changes you have to do to migrate your code and the default test runner SpecRunner.html to use RequireJs. We will cover:

  • Changes to the default Jasmine setup
  • RequireJs configuration
  • Changes to our libraries and specs.

Source code available at gsans/jasmine-require-bootstrap (Github).

Follow me on Twitter for latest updates @gerardsans.

RequireJS introduction

  • load resources on demand
  • define dependencies that must load before a module is executed

RequireJS will shine if you are working in large teams or if your dependency tree is complex enough. Besides, you also get other cool features such as: synchronous/asynchronous loading and lazy loading with promises. Once you have done the initial setup you will be able to use intrincate dependencies with ease.

Obviously, if you are already using RequireJS in your application, it also makes sense to use it in your tests.

Jasmine Default Setup

folders setup

Your SpecRunner.html should look similar to this:

This is how my-library.js and my-library.specs.js look like

If you have node installed in your machine you can use http-server to run the SpecRunner.html passing the only spec in our suite.

Image for post
Image for post
SpecRunner.html output

RequireJs Setup

We are telling RequireJS where to find its configuration with the data-main attribute of the script element.

We removed all external scripts files and only left require.js.

Note how we omitted the .js extension for main.js. This is how RequireJs identifies files by default.

RequireJs configuration file — main.js

We used jasmine-boot as an alias for boot.js

RequireJs Bootstrap

We use require() to load dependencies before running our code.

The previous code will load all jasmine-boot dependencies and continue with our specs in my-library.specs.js.

Note that if we had moved my-library.specs to the same level as jasmine-boot it could had been loaded before all jasmine-boot dependencies were done.

Once all script files are loaded we trigger window.onload() as Jasmine hooks into this event to initialise its engine.

Changes to our library

We use define() to define our libraries. This can load dependencies and return an instance for others to use.

Changes to our specs

The myLibrary parameter will get the instance returned by our library new definition.

We can now run our tests taking advantage of RequireJs helper functions making the testing experience more enjoyable.

Thanks for reading! Have any questions? Ping me on Twitter @gerardsans.

Resources


Image for post
Image for post

Sons of JavaScript

all about JavaScript — get in touch to submit new articles…

Gerard Sans

Written by

Developer Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | Views are my own | @fullstackcon @ReactiveConf @ngcruise @UphillConf UK ☂

Sons of JavaScript

all about JavaScript — get in touch to submit new articles or ideas

Gerard Sans

Written by

Developer Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | Views are my own | @fullstackcon @ReactiveConf @ngcruise @UphillConf UK ☂

Sons of JavaScript

all about JavaScript — get in touch to submit new articles or ideas

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store