JavaScript 单元测试或端到端测试答案

【问题标题】：JavaScript Unit Test or End to End TestJavaScript 单元测试或端到端测试
【发布时间】：2025-11-24 19:15:01
【问题描述】：

目前，我尝试与我的开发团队成员一起为我们的 javascript 解决方案开发一些模块化系统。因为我们能够重新开始，所以这次我们想把它做好——通过测试！

我们发现 Jasmine 和 Karma 用于我们的单元测试和 Selenium/Nightwatch 用于我们的端到端测试。

当我为那些从未通过 jQuery 接触任何 DOM 的系统组件编写单元测试时，我很高兴。但是有一天，我遇到了一些操纵 DOM 的组件。到目前为止，一切都很好。感谢 Jasmine-jQuery，我也设法测试了它们。在此之前，我确信仍然在单元测试的范围内。

不过，昨天，我正坐在一个组件前面，当用户要向下滚动网页时，它会使导航栏变得粘滞（或固定）。

我想再次用 Jasmine-jQuery 测试这个功能。我所做的是 - 我用“window.scrollTo(0, 2000)”模拟用户滚动，然后检查这些导航栏的属性是否已更改。

问题：

因为我需要模拟浏览器功能，我已经跨入域进行端到端测试，因此我的团队领导让我暂停。

我的问题：真的是这样吗？在我的选择中，端到端测试应该在生产环境中测试系统（如我们的）的多个功能的编排。因此，用户故事将是我将使用端到端测试进行测试的层。检查用户登录和撰写文章（例如）的路径是否按预期工作。但是在某些事件（如滚动事件）发生后检查 javascript 组件是否会成功向 DOM 添加/删除属性 - 仍然应该是一个单元测试。

我是一名学徒开发人员 - 我尊重团队领导的经验 - 但我仍然想完全确保事情会以正确的方式完成。

所以我问你是否可以告诉我在编写 JavaScript 和操作 DOM 时单元测试何时结束以及端到端测试何时开始。

一些队友向我解释说，如果您检查故障对用户体验的影响程度，这可能是一个很好的方式来了解它是否是 E2E 测试特定功能。但前提是你真的在单元测试和 E2E 之间挣扎。然后你应该问自己“失败会导致非常糟糕的用户体验，还是只会在控制台中抛出一些错误并且无法正确加载小图片”。

【问题讨论】：

标签： javascript unit-testing jasmine karma-jasmine end-to-end

【解决方案1】：

在这里您可以找到关于测试之间差异的非常好的解释：What's the difference between unit, functional, acceptance, and integration tests?。我认为带有 WebDriver 的 Selenium 是测试 E2E 的最佳解决方案。如果您使用的是 AngularJS，一个非常好的解决方案是使用 Protractor (https://angular.github.io/protractor/#/)。

希望对你有帮助

【讨论】：

嘿！感谢您的回答。好吧，我知道这些测试之间的硬性差异，但实际上将它们实施到代码域中要复杂得多。在单元测试或 E2E 测试中更好地测试代码的功能是我的问题。
好吧，用实用的语言：使用单元测试，您只需测试返回的函数和方法；使用 E2E，您可以测试用户体验和用户界面，以确保所有元素在不同的环境中按预期正确呈现弓箭手。
那么测试一个函数是否改变了 DOM 状态呢？在系统编程语言中，您将测试系统内的状态是否已更改。你会说 javascript 与 DOM 分离，因此它是 E2E / 集成测试吗？因为您将 JavaScript 系统集成到浏览器的 DOM 系统中？
我知道有时候找到测试特定行为的完美方法真的很棘手，也很难理解单元测试在哪里结束，E2E 从哪里开始。我们可以说单元测试不需要在浏览器中呈现您的网站，您仍然可以将 DOM 树对象分配给变量，并且在函数负责创建新 DOM 元素的情况下，您可以验证没有使用浏览器就创建了想要的节点。
我记得我在一个 PHP 项目中遇到过类似的问题。作为一种解决方法，我编写了一些验收测试，我将页面源代码存储在 XML 格式的变量中。

【解决方案2】：

查看这篇文章http://www.itaware.eu/2012/10/19/angularjs-unit-tests-and-end-to-end-tests/。它专门处理 Angular，但澄清了两者之间的区别。您的团队负责人绝对是对的，不是您操纵 DOM 使其成为 E2E 类型测试的事实，而是您模拟用户界面的事实。

【讨论】：

啊，好吧 - 多亏了我，我几乎可以锻造自己的思想了！