Javascript 如何在Jasmine单元测试中使用Sinon伪造jQuery动画的时间？

我有一个1秒的jQuery

.animate

动作，在页面加载5秒后启动。我在我的Jasmine单元测试代码中设置了一个Sinon计时器，并在7秒后进行测试，以查看动画后期属性是否如它们所应的那样

它不能正常工作，所以我在我的Jasmine HTML测试页面上放置了一个动画实例，以便更好地查看发生了什么

• 在Firefox和Chrome中，加载页面，调用动画功能，单元测试立即失败，然后（也立即）动画明显出现

• 在IE、Opera和Safari中，加载页面，调用动画功能，单元测试立即失败，动画永远不会出现

我所希望的是以下内容（在所有浏览器中）：

• 加载页面，调用动画函数，动画立即完成，单元测试立即成功

请看，它的假计时器包括以下过程：

设置超时

，

清除超时

，

设置间隔

，

清除间隔

，

日期

我不知道jQuery的动画是如何工作的，但我认为它是使用CSS进行转换的，而Sinon的

useFakeTimers

中没有涉及CSS转换，所以我认为这就是问题所在。然而，如果我对这个问题的看法是正确的，我仍然需要一个解决方案

也许我应该试试西农以外的东西？Jasmine的

waits（）

在这个测试中效果很好，但对于像我这样不耐烦的人来说却非常不切实际

---

还有其他建议吗？请记住，我是JS单元测试新手，所以含糊不清的答案会让我困惑，而不是帮助我；o） 我也有同样的问题。我相信这是因为jQuery的动画利用了

requestAnimationFrame（）

（如果可用）而不是依赖

setTimeout（）

我通过将

窗口

对象上的所有特定于浏览器的

requestAnimationFrame

函数设置为null，解决了这个问题：

window.webkitRequestAnimationFrame = null;
window.mozRequestAnimationFrame = null;
window.oRequestAnimationFrame = null;

确保在加载jQuery之前执行此代码。

您可以使用关闭jQuery效果：

jQuery.fx.off = true

---

这并不能解决您等待事件触发的初始7秒问题，但它确实意味着您可以测试DOM是否已按预期进行了更改。

我认为使用SinonJs是可能的，如下所示：

测试（“应在500ms以上设置元素动画”，函数（）{
var el=jQuery（“”）；
el.附录（文件正文）；
el.动画（{高度：“200px”，宽度：“200px”}）；
这个.时钟.滴答（510）；
等于（“200px”，标高css（“高度”）；
等于（“200px”，el.css（“宽度”）；
});

已经过了几天，没有人回答。为了解决这个问题，我现在正在使用Jasmine的waits（）功能。虽然测试不是即时的，而是实时完成的，但它工作得很好。嘘。请张贴任何其他想法，你可能会为我。谢谢，嘿！你找到解决这个问题的新方法了吗？$fx.off答案非常有效，但它仍然不是应该的方式…我没有。我一直在使用waits（）。我实际上已经把这个问题忘得一干二净了。但由于Derek的解决方案比Alex的简单，而且有好几票赞成（因此可能对其他人有效），我会尝试一下，如果它对我有效，我会将它标记为答案。这在使用jasmine+jquery+sinon.js时对我不起作用。我甚至确保它在我的任何规范文件甚至jquery之前作为src依赖项加载。也许我做错了什么？奇怪的是，当我独自运行测试时（没有任何其他测试），它通过了。

test("should animate element over 500ms", function () {
   var el = jQuery("<div></div>");
   el.appendTo(document.body);

   el.animate({ height: "200px", width: "200px" });
   this.clock.tick(510);

   equals("200px", el.css("height"));
   equals("200px", el.css("width"));
});