29

我正在设置我的 SpecRunner.html/.js、RequireConfig.js、我的路径和我的垫片，就像我在 Jasmine + RequireJs 的早期版本候选中一样，但现在我的测试方法显示 Jasmine 未定义。他们最近更改为加载 Jasmine 的不同方法，据我所知，它与 RequireJs 不兼容。

我的理解正确吗？如果是这样，我们还能再次使用 Jasmine + RequireJs 吗？

4

2 回答 2

70

新的 boot.js 进行了一系列初始化并将其附加到 window.onload() ，该方法在 require.js 加载 Jasmine 时已经被调用。您可以手动调用 window.onload() 来初始化 HTML Reporter 并执行环境。

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

示例规范

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

  describe('router', function() {
    it('should have routes defined', function() {
      router.config({});
      expect(router.routes).toBeTruthy();
    });
  });
});
于 2013-12-31T03:26:25.080 回答
13

这是一种在某些情况下可能更简单的替代方法 - 在执行测试之前使用Jasmine 的异步支持来加载您的 AMD 模块，如下所示：

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

为此，您需要在 SpecRunner.html 中包含 require.js 并可能配置 require（就像您通常那样，例如通过设置 baseUrl），如下所示：

在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>

对于此示例，AMD 模块实现可能如下所示：

在src/myModule.js 中：

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

这是一个实现这个完整示例的工作 Plunk。

享受！

于 2014-03-28T00:43:07.993 回答