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

Question

我正在努力使用 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>'

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

Answer 1

以下是 deceze 在 his comment 中的含义。测试中：

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

ul.element 是一个 JavaScript object。更准确地说，它是一个 DOM 节点。但是，<ul></ul> 是一个字符串。 Chai 与 === 进行比较。如果您将 DOM 节点与使用 === 的节点进行比较，唯一会 return 为真值的是 完全相同的 DOM 节点. "Exact same" 表示完全相同 JavaScript object。如果你这样做：

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

您在控制台上得到 true。如果你这样做：

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

你得到 false 因为两个操作数是两个不同的 object。出于您的目的，两个 DOM 节点可能是 "the same"，但就 === 而言，它们并不相同。由于没有字符串可以与 DOM 节点相同 object，因此您的测试失败。错误消息可能看起来令人困惑，但那是因为当 JSDOM 打印出错误时，它序列化了 DOM 节点。也就是然后JSDOM打印出DOM节点，其实是打印出了它的.outerHTML属性的值，而.outerHTML就是序列化的节点。

你想测试什么取决于你的最终目的是什么。如果你想测试元素的结构，你可以检查 .outerHTML，比如：

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

你的测试标题是 "should have addClass method"...所以也许你应该测试这个：

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

如果您打算将其作为测试代理来获得 HTMLElement，我建议您改为这样做：

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

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

Comparing the function output type in assertion

javascript

ecmascript-6

mocha.js

chai

jsdom