使用测试运行器来测试操作 DOM 的函数

debugcn 发表于 Dev

伊万

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

还有单元测试运行器，如 Mocha、Jasmine、AVA、Jest、QUnit。如果我理解正确，它们允许通过将返回值与已知结果进行比较来测试函数等代码单元。

如果我正在构建一个涉及处理文档对象的 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

}

我该如何测试：

add()返回一个HTMLElement和的实例
DOM 中存在div具有类名的元素newElement。

伊万

我刚刚找到了测试一些代码的解决方案。我不认为它可以与 Jest 一起开箱即用。我们实际上可以使用document!

以下是文件：

添加.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;

添加.test.js：

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，它返回：