Qunit 错误：测试上下文之外的断言答案

【问题标题】：Qunit error: assertion outside test contextQunit 错误：测试上下文之外的断言
【发布时间】：2013-06-05 20:22:11
【问题描述】：

我已经搜索过了，看来这个错误是由于没有正确使用asyncTest。但是，根据文档，看来我做得正确。我猜我在某个地方遗漏了一个小细节，需要一双额外的眼睛......

我正在尝试测试一些代码，该代码发出 ajax 请求以获取页面，然后将其加载到灯箱中。 lightbox-content 直到 ajax 调用完成并可以显示后才会显示在 DOM 中。所以，我只能在我的 onComplete 回调中检查它，这是我测试它是否正确加载它的地方。

这是我的代码：

asyncTest('mytest', 1, function() {
    utils.lightbox.show('/login', {
        onComplete: function() {
            ok($('#lighbox-content').is(':visible'), 'Lightbox loaded the /login page.');
            start();
        }
    });
});

我得到错误：

Uncaught Error: assertion outside test context, was at HTMLDivElement.window.utils

谁能看出我哪里出错了？

【问题讨论】：

lighbox-content 中缺少的t 是否是您发布问题时的拼写错误？
我有同样的错误信息，错误出现在on('load' 回调中而不是onComplete，但我认为它在引擎盖下都是一样的。您是否尝试过降级到不同的 QUnit 版本？

标签： javascript qunit

【解决方案1】：

据我所知，我同意您的代码与文档相符。

更新

即使文档没有显示它，我想知道您是否必须告诉 QUnit 在某个时候停止，以便它知道在测试函数返回后等待。我认为 QUnit 会假设这是一个异步测试，但值得一试。

asyncTest('mytest', 1, function() {
    stop();
    ...
});

我一直在使用 Sinon.JS 来避免首先进行 AJAX 调用。这具有三个直接的好处：

我不依赖服务器来响应请求。
我可以为每个测试指定不同的结果。
测试运行得更快。

模拟可以在 XMLHttpRequest 级别或 jQuery 方法上完成，并且非常容易。这是我的一项测试中的一个示例：

module("geo", {
    setup: function () {
        this.server = sinon.fakeServer.create();
    },

    teardown: function () {
        this.server.restore();
    }
}

test("returns detected ZIP code", function () {
    this.server.respondWith("/geo/detect-zip-from-ip",
                            [ 200, { "Content-Type": "text/html" }, '90210' ]);
    geo.detectZip(function (zip) {
        assertThat(zip, is('90210'));
    });
    this.server.respond();
});

【讨论】：

谢谢大卫。我会玩这个并试一试。我仍然对 Qunit 问题也很感兴趣。
这是“stop();”对我来说。谢谢提醒。 :)
@intargc 运气好能解决这个问题吗？

【解决方案2】：

我已经找到了适合我的情况的解决方案，希望您的问题有相同的根源。

用文字解释：

我有一个复杂的异步测试
我有延迟事件，里面有ok和equal断言
当然，这一切都包裹在asyncTest里面
但是，当测试“完成”并且我调用 start() 时，事件处理程序仍然存在
调用start() 后，ok 在asyncTest 内的所有进一步调用都将变为非法
并抛出异常
我想知道如果超过expect（在您的示例中是第二个参数）中的数字会发生什么。同样的例外？

代码解释：

    asyncTest('mytest', /*1,*/ function() {

          function imgLoadedOrFailed (result) {
              clearTimeout(imageTimeToLive);
              img.off();
              ok(result, 'Image in carousel pane has been loaded');
          }

          var imageTimeToLive = setTimeout(
                  imgLoadedOrFailed.bind(this, false), 
                  5000),
              img = panes[index].find('img:first');

          if (img) {
              img.on('load', imgLoadedOrFailed.bind(this, true));
              img.on('error', imgLoadedOrFailed.bind(this, false));
          }
      });


      // at some point I call: start();

在本例中，当我“完成”调用start() 的测试时，onload 和onerror 事件仍然会发生。

【讨论】：