Unit testing 使用测试运行程序测试操作DOM的函数

我最近发现了web应用程序的端到端测试运行程序。它们基本上通过运行web浏览器从头到尾复制用户场景。例如，有NightwatchJS和TetsCafé

还有单元测试跑步者，如摩卡、茉莉花、艾娃、杰斯特、库尼特。如果我理解正确，它们允许通过比较返回值和已知结果来测试类似代码的函数单元

如果我正在构建一个涉及处理文档对象的web应用程序，即追加和删除元素或更改它们的位置。我可以对上述五名单元测试跑步者进行测试吗？对我来说，端到端测试的运行者似乎成本更高：我不能像单元测试那样频繁地运行它们，因为它们只需要更多的时间

所以我的问题是，如何测试与DOM交互的函数？我在Jest的wiki上找到了解释如何测试JQuery代码的内容。但是我不知道如何测试我自己的函数（不涉及jQuery）

例如，我有一个函数，它将一个新的

div

附加到文档的

body

，并返回新创建的

div

元素

let add = function() {

  let div = createElement('div');
  div.innerHTML = '<div class="newElement">Hello World</div>';

  document.querySelector('body').appendChild(div)
  return div

}

let add=function（）{
设div=createElement（'div'）；
div.innerHTML='Hello World'；
document.querySelector（'body'）.appendChild（div）
返回分区
}

我如何才能真正测试这一点：

• add（）

  返回

  HTMLElement的实例

• DOM中存在一个类名为

  newElement

  的

  div

  元素

---

我刚刚发现解决方案正在测试一些代码。我不认为它会与开箱即用的玩笑一起起作用。我们实际上可以使用

文档
访问DOM

以下是文件：

add.js:

let add = function() {

    let div = document.createElement('div');
    div.innerHTML = '<div class="newElement">Hello World</div>';

    document.querySelector('body').appendChild(div)
    return div
}

module.exports = add;

const add = require('./add');

test('add() returns a HTML element', () => {

    expect(add()).toBeInstanceOf(HTMLElement)

})


it('a() creates a div with class name newElement', () => {

    add()
    let textContent = document.querySelector('.newElement').textContent
    expect(textContent).toBe('Hello World')

})

在命令行中键入
npm jest
，它将返回：


有人知道为什么会这样吗？JestJS是否正在创建一个要测试的空文档？
Jest使用
jsdom
作为默认测试环境，因此可以直接访问常用的浏览器全局文件

请看