Does Jasmine 2.0 really not work with require.js?

Question

Does Jasmine 2.0 really not work with require.js?

I set up my SpecRunner.html / .js, RequireConfig.js, my paths and my gaskets are the same as mine with earlier Jasmine + RequireJs candidates, but now my test methods show Jasmine undefined. They recently changed another way to load Jasmine, which, as I understand it, is not compatible with RequireJs.

Do I understand correctly? If so, is it possible to use Jasmine + RequireJs again?

+29

requirejs jasmine

Darin Oct 08 '13 at 6:07

source share

2 answers

Erik Ringsmuth · Answer 1 · 2013-12-31 03:26

The new boot.js does a bunch of initialization and attaches it to window.onload (), which is already called by the time require.js loads Jasmine. You can manually call window.onload () to initialize the HTML reporter and run the environment.

SpecRunner.html

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jasmine Spec Runner v2.0.0</title> <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png"> <link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css"> <!-- specRunner.js runs all of the tests --> <script data-main="specRunner" src="../bower_components/requirejs/require.js"></script> </head> <body> </body> </html>

specRunner.js

 (function() { 'use strict'; // Configure RequireJS to shim Jasmine require.config({ baseUrl: '..', paths: { 'jasmine': 'tests/lib/jasmine-2.0.0/jasmine', 'jasmine-html': 'tests/lib/jasmine-2.0.0/jasmine-html', 'boot': 'tests/lib/jasmine-2.0.0/boot' }, shim: { 'jasmine': { exports: 'window.jasmineRequire' }, 'jasmine-html': { deps: ['jasmine'], exports: 'window.jasmineRequire' }, 'boot': { deps: ['jasmine', 'jasmine-html'], exports: 'window.jasmineRequire' } } }); // Define all of your specs here. These are RequireJS modules. var specs = [ 'tests/spec/routerSpec' ]; // Load Jasmine - This will still create all of the normal Jasmine browser globals unless `boot.js` is re-written to use the // AMD or UMD specs. `boot.js` will do a bunch of configuration and attach it initializers to `window.onload()`. Because // we are using RequireJS `window.onload()` has already been triggered so we have to manually call it again. This will // initialize the HTML Reporter and execute the environment. require(['boot'], function () { // Load the specs require(specs, function () { // Initialize the HTML Reporter and execute the environment (setup by `boot.js`) window.onload(); }); }); })();

Spec example

 define(['router'], function(router) { 'use strict'; describe('router', function() { it('should have routes defined', function() { router.config({}); expect(router.routes).toBeTruthy(); }); }); });

curran · Answer 2 · 2014-03-28 00:43

In an alternative approach, which might be simpler in some cases, use the Jasmine asynchronous support to load your AMD module before running the tests, for example:

in MySpec.js :

 describe('A suite', function() { var myModule; // Use require.js to fetch the module it("should load the AMD module", function(done) { require(['myModule'], function (loadedModule) { myModule = loadedModule; done(); }); }); //run tests that use the myModule object it("can access the AMD module", function() { expect(myModule.speak()).toBe("hello"); }); });

To do this, you need to include require.js in your SpecRunner.html and, possibly, configure it (as usual, for example, by setting baseUrl), for example:

in SpecRunner.html :

 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Jasmine Spec Runner v2.0.0</title> <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png"> <link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css"> <script src="lib/require.min.js"></script> <script> require.config({ baseUrl: "src" }); </script> <script src="lib/jasmine-2.0.0/jasmine.js"></script> <script src="lib/jasmine-2.0.0/jasmine-html.js"></script> <script src="lib/jasmine-2.0.0/boot.js"></script> <script src="spec/MySpec.js"></script> </head> <body> </body> </html>

In this example, an AMD module implementation might look something like this:

in src / myModule.js :

 define([], function () { return { speak: function () { return "hello"; } }; });

Here's a working Plunk that implements this complete example .

Enjoy it!

Does Jasmine 2.0 really not work with require.js?

More articles: