如何对诸如使用 JavaScript 预加载图像之类的东西进行单元测试？答案

【问题标题】：How do I unit test things like image preloading with JavaScript?如何对诸如使用 JavaScript 预加载图像之类的东西进行单元测试？
【发布时间】：2011-10-18 08:01:36
【问题描述】：

我正在尝试对 JavaScript 网络跟踪功能进行单元测试，因为我们打算将其作为库公开，并希望确保其界面保持稳定。 JavaScript 网络跟踪的工作方式类似于图像预加载，如下所示：

if (document.images) {
    var image = new Image();
    image.onload = function () {
        ...
    };
    image.src = pixelUrl;
}

在单元测试中（使用 js-testdriver）时，我现在尝试验证是否已使用正确的 pixelUrl 创建了图像，我想我必须这样做：

call_the_reporting_function();

assertNotUndefined(document.images[0]);
assertNotUndefined(document.images[0].src);

我现在的问题是第一个断言已经失败。好像没有立即将新图像添加到 document.images 中。

有人知道如何在 JavaScript 中对此类事物进行适当的单元测试吗？

谢谢

斯蒂芬

【问题讨论】：

标签： javascript image unit-testing document

【解决方案1】：

我们刚刚采用的一种可能的解决方案是通过提取上面的部分进行 html 操作并模拟它来规避问题。

虽然这个解决方案很好，但它肯定至少有两个缺点： - 如果您不使用特定于浏览器的部分，那么使用基于浏览器的单元测试框架（如 jsTestDriver，也就是我们正在使用的）是没有意义的 - 代码未经测试，您必须确保它可以手动运行或使用运行时昂贵的 Selenium 测试（您可以在 HttpClient 之前配置代理并简单地捕获浏览器发出的所有 Web 跟踪请求。断言在捕获时完成请求）

【讨论】：