Javascript单元测试 - DOM操作

Question

我对Javacript Unit测试很陌生.有一件事让我烦恼.在测试javascript时,我们经常需要进行DOM操作.看起来我在控制器/组件中测试方法/功能,但我仍然需要依赖模板中的HTML元素.一旦id(或我的测试用例中曾经是选择器的属性)发生变化,我的测试用例也需要更改!这不会违反单元测试的目的吗？

Answer 1

javascript单元测试中最棘手的部分之一不是测试,它正在学习如何构建代码以使其可测试.

您需要通过明确分离可测试逻辑和DOM操作来构建代码.

我的经验法则是这样的:

如果您正在测试任何依赖于DOM结构的东西,那么您做错了.

总结:尝试仅测试数据操作和逻辑操作.

Answer 2

我恭敬地不同意@BentOnCoding。大多数情况下，组件不仅仅是它的类。组件结合了一个 HTML 模板和一个 JavaScript/TypeScript 类。这就是为什么您应该测试模板和类是否按预期协同工作。仅类测试可以告诉您有关类行为的信息。但是他们无法告诉您组件是否会正确呈现并响应用户输入。

有人说你应该在集成测试中测试它。但是集成测试的编写/运行速度较慢，运行/维护成本更高（在时间和资源方面）。因此，在集成测试中测试大部分组件功能可能会减慢您的速度。

这并不意味着您应该跳过集成测试。虽然集成和 E2E 测试可能比单元测试慢且成本高，但它们让您更有信心相信您的应用程序正在按预期工作。集成测试是将单个单元/组件组合起来并作为一个组进行测试的地方。它不应被视为测试组件模板的唯一场所。