比较断言中的函数输出类型

我正在努力使用 chai、mocha 和 JS-DOM 编写测试断言。 我有一个简单的函数，例如：

function HtmlElement(el) {
  this.element = (el instanceof HTMLElement) ? el :document.createElement(el);
}

在我的测试中：

it('should have addClass method', function () {
  const ul = (new HtmlElement('ul'));
  ul.element.should.be.equals('<ul></ul>'); // Outputs the actual UL 
});

但错误：

AssertionError: expected <ul></ul> to equal '<ul></ul>'

是我无法理解的 - 返回什么类型的输出以及这里应该使用什么断言？

这就是 deceze 的意思他的评论 https://stackoverflow.com/questions/54706993/comparing-the-function-output-type-in-assertion#comment96200091_54706993。在测试中：

ul.element.should.be.equals('<ul></ul>');

ul.element是一个 JavaScript 对象。更准确地说，它是一个 DOM 节点。然而，<ul></ul>是一个字符串。 Chai 与===。如果你将 DOM 节点与使用的东西进行比较===，唯一会返回真值的是完全相同的 DOM 节点。 “完全相同”意味着完全相同的 JavaScript 对象。如果你这样做：

const node = document.createElement("ul");
console.log(node === node);

You get true在控制台上。如果你这样做：

console.log(document.createElement("ul") === document.createElement("ul"));

You get false因为两个操作数是两个不同的对象。出于您的目的，两个 DOM 节点可能是“相同的”，但它们并不相同===被关注到。由于任何字符串都不能与 DOM 节点是同一对象，因此您的测试会失败。错误消息可能看起来令人困惑，但那是因为当 JSDOM 打印出错误时，它会序列化 DOM 节点。也就是说，然后JSDOM打印出DOM节点，它真的打印出了它的值.outerHTML财产，以及.outerHTML是节点的序列化。

您想要测试的内容取决于您的最终目标是什么。如果你想测试元素的结构，你可以检查.outerHTML， 就像是：

ul.element.should.have.property("outerHTML").equal("<ul></ul>");

你的测试的标题是“应该有 addClass 方法”......所以也许你应该测试这个：

ul.element.should.have.property("addClass").be.a("function");

如果你想让它作为测试的代理，你会得到一个HTMLElement，我建议改为这样做：

ul.element.should.be.instanceof(HTMLElement);