如何解决使用 Sinon.js 模拟 Jquery 事件
我有以下 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
我已经尝试了很多文章但没有运气
提前致谢！
解决方法
BackToTop 模块有两个私有（作用域）函数：baclTop 和 animate。
当你暴露它们时，你声明了另外两个附加到模块的函数：
return {
baclTop,// shortcut for baclTop: baclTop
animate,}
所以当你创建 spy 时，sinon 会在 return bock 中包装暴露的函数：
const operation = sinon.spy(BackToTop,"animate");
但是，当您调用 BackToTop.baclTop() 时，这将调用 animate 函数的“内部”版本，而 sinon 无法拦截此调用。
你不能那样做，你必须以可测试的方式重写你的代码，或者只是监视你直接调用的函数。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。