System.js with JasmineBDD

and so a difficult day started…

I want to be able to run tests in for a small test library I have written, whilst experimenting with System.Js / JSPM as a build and deploy framework.

Assuming you have a System.Js project up and running, I had to do the following. Firstly install Jasmine, which is simple enough as its hosted in NPM. There isn’t a JSPM package for it, but this can be overcome using…

> jspm install npm:jasmine

Thats the easy bit done. Unfortunately, if I tried importing “jasmine” I received lots of fs.something does not exist errors. ( with a bit of background knowledge ) this is because the library ‘jasmine.js’ is configured for usage in Node.Js which is a server side environment, and has things like files, but in the browser this does not exist.

According to the Jasmine website, you need to load ‘jasmine-core’, ‘jasmine-html’ and ‘boot’ separately, which then works in the browser. I can verify this, as I have used this approach previously.

I tried referencing these 3 imports, then received errors, that they could not be found. This is due to JSPM creating a reference to the ‘jasmine’ package, but not the subparts. The easiest way to correct this, i found, was to add in a few new mappings to config.js.

map: {
“jasmine”: “npm:jasmine-core@2.6.4/lib/jasmine-core/jasmine”,
“jasmine-html”: “npm:jasmine-core@2.6.4/lib/jasmine-core/jasmine-html”,
“jasmine-boot”: “npm:jasmine-core@2.6.4/lib/jasmine-core/boot”,

This solved the loading problem, but now I received errors that jasmineRequire as not available. After hours of fiddling I found a solution using the async promise loading in System.js. By loading each part individually and exposing the jasmine library, I was able to coax it into life.

<!-- test.html -->
<script src="../jspm_packages/system.js"></script>
<script src="config.js"></script>
System.import( 'jasmine' )
.then( function( jasmineRequire ){
window.jasmineRequire = jasmineRequire;
System.import( 'jasmine-html' );
System.import( 'jasmine-boot' )
.then( loadTests );

loadTests is a separate function which is just separated out for tidyness

function loadTests(){
System.import( './test/networking/xhr' )
.then( function(){
// This is a little odd?

Finally this started to run and load my tests. There is a little oddity here, in that I had to re-run window.onload, which ( i think ) is caused by the slightly odd bit of code in boot.js, which hijacks the onload event and is fine normally, but in complex loader environments really causes problems.

For completeness, here is my test.

import xhr from '../../lib/networking/xhr';
describe( 'Networking', function() {
console.log( "IT" );
it( 'test 1 is 1', function() {
expect( 1 ).toBe( 1 );

and that’s it. Testing in the browser, in a System.js environment. This took a long time and a lot of fiddling to get work.

I hope it saves you a few hours…

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.