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

Question

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

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

如果我正在构建涉及处理文档对象的 Web 应用程序，即添加和删除元素或更改它们的位置。我可以用上面的五个单元测试运行ners 来做这个吗？对我来说，端到端测试运行人员的成本似乎更高：我负担不起像单元测试那样频繁地运行它们，因为它们只需要更多时间。

所以我的问题是，如何测试与 DOM 交互的函数？我在 Jest 的 wiki 上找到了 this page，它解释了如何测试 JQuery 代码。但是我不知道如何测试我自己的功能（没有jQuery参与）。

例如，我有一个函数可以将新的 div 附加到文档的 body 和 returns 新创建的 div 元素。

let add = function() {

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

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

}

我怎样才能真正测试：

add() returns HTMLElement 和
class 名称 newElement 的 div 元素存在于 DOM.

Answer 1

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

访问 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;

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，它 returns:

有人知道为什么会这样吗？ JestJS 是否正在创建一个空文档来测试？

Answer 2

Jest 使用 jsdom 作为默认测试环境，因此可以立即访问常用的浏览器全局变量。

请看https://facebook.github.io/jest/docs/en/configuration.html#testenvironment-string

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

Using a test runner to test functions that manipulate the DOM

unit-testing

test-runner

jestjs