文档元素的模拟对象

Question

我有下一个测试代码:

it("Test", function() {
    loadResources();

    expect(document.getElementById('MyElement').innerHTML).toBe("my string");
});

函数体loadResources():

document.getElementById('MyElement').innerHTML = "my string";

我的测试失败并显示以下消息:

TypeError:无法设置null的属性"innerHTML".

看起来我需要为innerHTML创建模拟对象.我怎么能这样做？

Answer 1

我认为你应该模拟getElementById返回虚拟HTMLElement

var dummyElement = document.createElement('div');
document.getElementById = jasmine.createSpy('HTML Element').andReturn(dummyElement);

所以现在,每次调用document.getElementById它都会返回虚拟元素.它将设置虚拟元素的innerHTML,并将其与最终的预期结果进行比较.

编辑:我想你应该更换toBe使用toEqual.toBe可能会失败,因为它将测试对象标识而不是值相等.

EDIT2(关于多个身份证):我不确定,但你可以打电话给假.它将为每个ID创建一个新的HTML元素(如果它还不存在)并将其存储在对象文字中以供将来使用(即getElementById使用相同ID的其他调用)

var dummyElement = document.createElement('div');
document.getElementById = jasmine.createSpy('HTML Element').and.returnValue(dummyElement);

Answer 2

通过 id 设置文档正文和 getElement。我正在使用开玩笑，这很好用。从 jest 文档中查看此示例。

test('Toggle innerHtml of an element', () =>{
document.body.innerHTML =
            '<div>' +
            '  <div id="username" >Hello</div>' +
            '  <button id="button" />' +
            '</div>';
var el = document.getElementById('username');
var newText = 'new inner text';
el.innerText = newText;
expect(el.innerText).toEqual(newText);
});

Answer 3

尝试这个：

it('should blah', () => {
  const elementMock = {
    innerHTML: 'my string'
  };    

  loadResources();

  jasmine.spyOn(document, 'getElementById').and.returnValue(elementMock);

  expect(document.getElementById('MyElement').innerHTML).toBe('my string');
});