如何对自定义元素进行单元测试

Question

我有一个扩展 HTMLElement 的类。从阅读这个线程

https://github.com/Microsoft/TypeScript/issues/574#issuecomment-231683089

我发现如果没有Illegal constructor，我无法实例化自定义元素。此外，registerElement 看起来很有希望，因为它返回了自定义元素的构造函数，但现在不推荐使用 CustomElementRegistry.define() 1. 存在于窗口对象上并且 2. 返回 void。任何解决方案将不胜感激。

对于这个特定的设置，我尝试使用原生自定义元素而不是 Web 组件框架，因为我只需要自定义元素。另外，我正在使用 TypeScript 并尝试使用 Jest 对其进行测试。

Answer 1

根据您的元素正在做什么，您可以考虑将“关注点分离”和“控制反转”的设计原则考虑在内。

当不同的事物在不同的类中实现时，将实现关注点分离。这也意味着可以在不实例化具体 HtmlElement 的情况下测试分离的内容。

此时控制反转派上用场了，因为如果分离的类（可能是 HtmlElement）的依赖关系可以从类外部设置，您可以通过为测试实例提供一个存根来轻松存根或模拟 HtmlElement .

我们的想法是设计您的代码，使其独立于单元测试中不可访问或不可控制的事物。