使用 Sinon.js 模拟 Jquery 事件答案

【问题标题】：Mock Jquery event using Sinon.js使用 Sinon.js 模拟 Jquery 事件
【发布时间】：2021-04-22 09:54:01
【问题描述】：

我有以下 javascript 模块，当用户单击返回顶部按钮时，它会动画并将页面移动到顶部。

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;
    const { window } = new JSDOM(`...`);
    var $ = require("jquery")(window);
    
    const BackToTop = (function () {
      var baclTop = () => {
        $(".back").on("click", BackToTop.animate);
      };
      var animate = function () {
        $("html, body").animate({ scrollTop: "0" }, 1000);
      };
    
      return {
        baclTop,
        animate,
      };
    })();
    
    module.exports = BackToTop;

我使用 mocha 和 sinon.js 编写了以下测试用例，但出现以下错误

const BackToTop = require("../src/backToTop");
const sinon = require("sinon");
const jsdom = require("jsdom");
const document = new jsdom.JSDOM("<html></html>", {});
const window = document.defaultView;
global.document = document;
global.window = window;
const { expect } = require("chai");

describe("Name of the group", () => {
  it("should ", (done) => {
    $("body").append("<div class='sd-back-to-top'>hello world</div>");
    const operation = sinon.spy(BackToTop, "animate");

    $(".back").trigger('click');
    BackToTop.baclTop();
    expect(operation.callCount).to.be.eq(1);
    done();
  });
});
AssertionError: expected 0 to equal 1
    at Context.<anonymous> (test\backToTop.spec.js:17:39)
    at processImmediate (internal/timers.js:461:21)

+ expected - actual

-0
+1

我已经尝试了很多文章但没有运气

提前致谢！

【问题讨论】：

测试代码中看不到$变量
@lifeisfoo $ 全球可用。问题出在测试中
为什么你同时调用 trigger 和 backlTop？您是否尝试将期望和完成调用包装在 1 秒超时内，只是为了检查触发器执行是否是排队的异步操作？
我都试过了，但都没有成功
你能在 github 上上传一个完整的不工作的例子吗？

标签： javascript jquery mocha.js sinon-chai

【解决方案1】：

BackToTop 模块有两个私有（作用域）函数：baclTop 和 animate。

当你公开它们时，你声明了另外两个附加到模块的函数：

return {
    baclTop, // shortcut for baclTop: baclTop
    animate,
}

所以当你创建spy时，sinon会将函数暴露的函数包装在return bock中：

const operation = sinon.spy(BackToTop, "animate");

但是，当你调用BackToTop.baclTop()时，这将调用animate函数的“内部”版本，而sinon无法拦截这个调用。

你不能这样做，你必须以可测试的方式重写你的代码，或者只监视你直接调用的函数。

【讨论】：