Question

试图搞定QUnit，运行一些麻烦：当我运行以下测试时：

   test("Trying QUnit", function() {
            expect(1);
            var div = $('<div>')
            div.addClass('field-box');
            same(fieldBox(), div, 'Expected ' + div + ' was: ' + fieldBox());
        });
    });

    function fieldBox() {
        return $('<div class="field-box">');
    }

我收到消息：

Expected [object Object] was: [object Object]
Expected:   
[
  <div class="field-box"></div>
]

哪个不给我任何错误的暗示。如果我改变fieldBox方法以返回带有“field-boxing”类的div，我会得到以下更多解释性消息：

 Expected [object Object] was: [object Object]
Expected:   
[
  <div class="field-box"></div>
]
Result: 
[
  <div class="field-boxing"></div>
]
Diff:   
 [
   <div class="field-box"></div>
class="field-boxing"></div>
 ]

这使我相信我的初始测试实际上没有任何问题，因为没有显示Diff。 然而它失败了，为什么？

Answer 1

此测试通过 -

test("Trying QUnit", function() {
    expect(1);
    var div = $('<div>')
    div.addClass('field-box');
    same(fieldBox().html(), div.html(), 'Expected ' + div + ' was: ' + fieldBox());
});

可能是qunit正在比较两个JavaScript对象，虽然对象中包含的内容是相同的，但对象不一样（即它们不指向内存中的同一对象），因此测试失败

修改

我使用下面的代码抛出了两个对象的对象图 -

for (property in div[0]) { output += property + ': ' + div[0][property]+'; '; }

'var div'div的parentNode属性是 -

parentNode: null;

和'fieldBox（）'函数div它是 -

parentNode: [object DocumentFragment];

我认为由于创建对象的方式不同而发生了这种差异。然后，Qunit将在迭代每个对象属性时发现这种差异，并相应地使测试失败。

Answer 2

DOM对象通过它们的身份进行比较，而不是它们的内容，即使使用它们（现在是deepEquals，同样被弃用）。

使用.html（），您可以比较文本表示，以及实际内容。

QUnit测试失败：未给出结果消息

2 个答案: