Question

我是RequireJS的新手，并且在将QUnit写入源代码时遇到了麻烦，该源代码具有使用requireJS动态加载模块的逻辑。

以下是源代码：factory / Factory.js *

getPage: function (callback) {

    //doSomething here

    require(['page/something'], function() {

         callback();

    })
}

在运行QUnit时，永远不会加载模块“page / something”，并且永远不会调用回调。这里有什么我想念的吗？感谢您的回复。

* * QUnit factory / FactoryTests.js *

define(['underscore', 'factory/Factory'],
       function (_, Factory) {

           module("Factory", {
               setup:function () {
               },
               teardown:function () {
               }
           });

           test("GetPage", function () {
              var isCallbackInvoked = false;
              var mockCallback = function () {
                  isCallbackInvoked = true;
              }

              Factory.getPage(mockCallback);
              ok(isCallbackInvoked);

           });

});

*的 测试需要-config.js **

require.config({

    baseUrl: "../../resources/js",

    paths:{
        jquery:'../jquery-1.8.2',
    jquery_star_rating : '../jquery/jquery.rating',
        underscore:'..underscore-1.4.1',
        backbone:'../backbone-0.9.2',
        jquery_star_rating : '../jquery.rating',
        text : '../require-text-2.0.3',
        sinon: '../../../../sinon',
    },
    shim:{
        underscore:{
            exports:'_'
        },
        backbone:{
            deps:["jquery", "underscore"],
            exports:"Backbone"
        }
        jquery_star_rating : {
            deps : ['jquery']
        }
    }

});

var dependencies = [
    'jquery',
    'jquery_star_rating',
    'underscore',
    'backbone',       
    'sinon',
];

require(dependencies, function () {

    require(['../../../../test/js/testsuite'], function(suite){

    })

});

testsuite.js

function () {

    QUnit.config.autostart = false;

    var testModules = [       
        "factory/FactoryTests.js"
    ];

    require(testModules, QUnit.start);
}());

谢谢！

Answer 1

首先，澄清一下：您的QUnit测试页面是什么样的？我猜它要么列出零测试，要么是一个空白页。

如果是这种情况，I had a lot of trouble with the same thing。 “正确”的答案正是你所做的。但经过大量的代码处理后，在我的设置中，尽管设置了QUnit.config.autostart = false，QUnit仍然在定义任何测试之前就开始了。

在testsuite.js结束时，请尝试拨打QUnit.load()而不是QUnit.start()（您也可以删除autostart = false）。这是一个无证件的功能，但它是唯一对我有用的东西。我相信它是默认情况下QUnit附加到onLoad事件的函数。不幸的是，使用RequireJS，onLoad会在大多数js文件加载之前触发。

Answer 2

我今天已经解决了这个问题，我正在将收集的信息添加到@keithjgrant正确答案中。

来自RequireJs documents：

<强> QUnit

尽管QUnit在作为异步模块加载时遇到问题，但您可以通过在require.js之前将其包含在脚本标记中来使其工作，   然后关闭自动启动，然后手动调用start（）一次   你的模块加载了测试。但是，需要调用start   从计时器里面。这是完整的安全带。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QUnit Test Suite</title>
    <link rel="stylesheet" href="qunit-git.css">
    <script data-main="main" type="text/javascript" src="libs/require.js"></script>
    <script src="libs/qunit-git.js"></script>
    <script type="text/javascript">
        window.addEventListener("load", function onLoad() {
            QUnit.config.autostart = false;
                        // Without this setTimeout, the specs don't always get execute in webKit browsers

            setTimeout(function () {
                                //load tests using require
                require(['firstUse/example_test'], function (one) {
                    //now trigger them.
                    QUnit.start();
                });

            }, 10);
            window.removeEventListener("load", onLoad, true);
        }, true);
    </script>
</head>
<body>
    <div id="qunit">
    </div>
</body>
</html>

如果您需要停止测试，请使用Qunit.stop（），再做一些异步然后使用QUnit.start（）再次启动它们。

来自QUnit源代码

Unit.load = function() {
  ...

  if ( config.autostart ) {
    QUnit.start();
  }
};

if ( defined.document ) {
   addEvent( window, "load", QUnit.load );
}

我已经调查了为什么使用我的不同方法调用QUnit和RequireJs不起作用。我找到了相同的解决方案@keithjgrant建议。

在调试从RequireJs调用QUnit的代码时，似乎已经调度了窗口加载事件。 document.readyState为'complete'。由于load事件的addEventHandler行为不像promise，因此向已触发的事件添加处理程序不会触发处理程序。

明确调用QUnit.load函数，解决了我的问题。如果窗口已完成加载，则需要考虑如何在该调用点找到。您可以使用JQquery或document.readyState == 'complete'从中获取{{1}}来执行此操作。

Answer 3

你可以这样做：

    <!DOCTYPE html>
<html>
<head>
    <title>Example Test Runner</title>
    <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
    <script src="../libraries/qunit/qunit/qunit.js" data-main="testsuite.js"></script>
    <script>
        QUnit.config.autostart = false;
    </script>
    <!-- Load RequireJS & the testsuite -->
    <script src="../libraries/requirejs/require.js" data-main="testsuite.js"></script>
</head>
<body>
<div id="qunit"></div>
</body>
</html>

因此在设置QUnit选项后，requirejs将开始工作。

RequireJs加载模块 - Qunit

3 个答案:

来自RequireJs documents：

来自QUnit源代码