javascript - 我如何模拟或伪造网站的行为以允许对某些 JS 功能进行单元测试

Question

情况:我刚开始学习对我的 JavaScript 代码进行单元测试，我想知道是否有一种方法可以伪造应用程序的行为以测试某些情况。我读到了 sinon.js spy/stub/mock。然而，与往常一样，对于 JS，还有许多其他脚本和组合(即与 mocha、chai、karma-jasmine)，我希望有人能告诉我最佳实践。

让我们举个例子:如果我想在测试运行器中测试一个函数，它会根据窗口大小更改背景大小，触发不同的窗口大小(而不是元素大小)以查看背景大小调整在多个窗口中工作是很复杂的方面。

我已经测试了一些东西，比如

var resizeW = sinon.stub($.prototype, 'width').returns(600);
var resizeH = sinon.stub($.prototype, 'height').returns(1600);

// no effect - always takes the original view.height/width
viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0"); 

// new window is not testable in the root testrunner window
window.open + window.resizeTo() / window.resizeBy() 

// shows no effect
window.innerHeight = '120'; window.innerWidth = '500';

// provides no possibility to assume different dimensions
$(window).trigger('resize');

// provides no possibility to assume different dimensions
$(document).trigger('resize');

// provides no possibility to assume different dimensions
window.dispatchEvent(new Event('resize'));

使用 iframe 会很乏味，即原始 HTML 和测试运行器 HTML 之间的 CSS 和 jQuery 冲突。

我希望有人可以提出一种方便的方法来实现这一点。

Answer 1

听起来好像您真正关心的是您的应用程序如何与浏览器集成，不一定是您自己控制的逻辑。这看起来像是一个集成测试，在那种情况下，您不会希望取消浏览器功能。在这种情况下，其他人提到的一些测试框架(例如 Selenium)可能是一个不错的选择(我可能还建议使用 Puppeteer，它具有 setViewport 函数)。

如果您将依赖项外部化，如果存在值得单独测试的内部逻辑，也可以将其编写为单元测试，方法是将宽度和高度传递到您的代码中并验证您的代码响应适当，但听起来好像这里的逻辑主要是围绕与浏览器/jQuery/DOM 集成。

关于最佳实践，要记住和探索的一个重要格言是 don't mock code that you don't own - 如果你这样做，你就是在 mock 你无法控制的行为，并且可能会改变你的行为，并且可能允许你的实现泄漏到你的测试中。