javascript - 模拟点击文档 ReactJS/JSDom

Question

所以我正在为在文档上添加点击事件的代码编写一些测试。我正在使用 JSDom、ReactJS 和 Mocha/Chai 设置。我在测试中尝试了以下代码:

document.addEventListener('click', function() {
  console.log('test');
});
React.addons.TestUtils.Simulate.click(document);
//also tried React.addons.TestUtils.Simulate.click(document.body);

但是这段代码并没有产生我期望的回声。

有没有办法用 JSDom 和 ReactJS 在文档上模拟点击、按键等...？

更新

对于 Nick 的回答，我尝试将这段代码添加到测试中:

document.body.addEventListener('click', function() {
  console.log('test');
});

document.body.click();

我直到没有得到控制台日志输出。我不确定 JSDom 和做这种事情是否有问题。

如果我不能对这段代码进行单元测试，那没关系，现在已经有一些代码我无法对其进行单元测试(需要真正的 DOM 才能获得宽度、高度等的代码...... ) 但我希望能够对大部分代码进行单元测试(而且我对使用 PhantomJS 进行单元测试不感兴趣)。我的集成测试将涵盖该类型的代码。

UPDATE2

另一件需要注意的事情是，当我 console.log(document); 时，我看到对象附加到 _listeners 属性以供 click 所以我知道事件正在附加，它似乎没有执行。

Answer 1

更新 document.body.click 将在浏览器中运行，但对于 jsdom 您需要手动创建事件:

document.body.addEventListener('click', function() {
  console.log('test');
});

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, true);
document.body.dispatchEvent(evt)

上面的代码在 Jest 中对我有用，也应该与“solo”jsdom 一起工作。

2018 年秋季假期更新 🦃

围绕模拟事件的工具已经变得更好了。我目前已经改变了我的方法来使用优秀的 react-testing-library渲染我的组件和调度事件:

import {render, fireEvent} from 'react-testing-library'

test('example', () => {
  const handleClick = jest.fn()

  const {getByText} = render(<div><button onClick={handleClick}>Click Me</button></div>)
  fireEvent.click(getByText('Click Me'))

  expect(handleClick).toHaveBeenCalled()
})

虽然我仍然相信使用诸如 puppeteer 或 selenium(或 cypress!)之类的东西进行端到端测试可以提供最高水平的可信度，证明某些东西确实有效，但它提供了巨大的值(value)，而不会因手动创建事件而污染测试。