Does Jasmine 2.0 really not work with require.js?

2019-01-21 08:09发布

站内文章 / 前沿技术
89 0 0

问题:

I'm setting up my SpecRunner.html/.js, RequireConfig.js, my paths and my shims just like I have with earlier release candidates of Jasmine + RequireJs, but now my test methods show Jasmine undefined. They've recently changed to a different method of loading Jasmine that I understand is incompatible with RequireJs.

Is my understanding correct? If so, will we ever be able to use Jasmine + RequireJs again?

回答1:

The new boot.js does a bunch of the initialization and attaches it to window.onload() which has already been called by the time require.js loads Jasmine. You can manually call window.onload() to initialize the HTML Reporter and execute 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's 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();
    });
  });
})();

Example spec

define(['router'], function(router) {
  'use strict';

  describe('router', function() {
    it('should have routes defined', function() {
      router.config({});
      expect(router.routes).toBeTruthy();
    });
  });
});


回答2:

Here's an alternative approach that may be simpler in some cases - use Jasmine's asynchronous support to load your AMD module before executing tests, like this:

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");
  });
});

For this to work, you'll need to include require.js in your SpecRunner.html and possibly configure require (as you normally would, e.g. by setting the baseUrl), like this:

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>

For this example, the 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!



标签： requirejs jasmine
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~