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

这里是his comment中递减的意思。在测试中：

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

ul.element是一个JavaScript对象。更确切地说，它是一个DOM节点。但是，<ul></ul>是一个字符串。柴用===做比较。如果将DOM节点与使用===的对象进行比较，则唯一会返回真实值的是完全相同的DOM节点。 “完全相同”表示完全相同的JavaScript对象。如果您这样做：

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

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

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

因为两个操作数是两个不同的对象，所以得到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);

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

1 个答案: