Question

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

还有单位测试跑步者，如摩卡，茉莉，AVA，Jest，QUnit。如果我理解正确，他们允许通过比较返回值和已知结果来测试代码单元。

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

所以我的问题是，如何测试与DOM交互的函数？我在Jest的wiki上找到了this page，它解释了如何测试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的{{1}}元素。

Answer 1

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

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

Answer 2

我刚刚找到测试一些代码的解决方案。我不认为它可以与开箱即用的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中输入，它将返回：

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

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

2 个答案: