Имитация щелчка по документу ReactJS/JSDom

Итак, я пишу некоторые тесты для кода, который добавляет событие click на документ. Я использую настройку 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);

однако этот код не производит Эхо, что я ожидал.

есть ли способ имитировать щелчок, keyup и т. д... на документе с JSDom и ReactJS?

обновление

для ответов Ника я попытался добавить это код к тесту:

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

document.body.click();

и я пока не получаю вывод журнала консоли. Я не уверен, есть ли какие-то проблемы с JSDom и делать такие вещи.

если я не могу модульный тест этого кода, это нормально, уже есть некоторый код, который я не могу модульный тест прямо сейчас (код, который требует реального DOM, чтобы иметь возможность получить ширину, высоту и т. д...) но я хотел бы иметь возможность модульного тестирования большей части кода (и я не заинтересован в использовании PhantomJS для модульного тестирования). Мой интеграционные тесты будут охватывать этот тип кода.

обновление 2

еще одна вещь, чтобы отметить, что, когда я console.log(document); Я вижу объект, прикрепленный к _listeners собственность за click поэтому я знаю, что событие прикрепляется, оно просто не выполняется.

12
javascript jsdom reactjs unit-testing

3 ответов

обновление: 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)

приведенный выше код работает для меня в шутку и также должен работать с "solo" jsdom.

24

реагировать.дополнения.Тестутилы.Имитация работает только с виртуальными событиями. Если вы хотите отправить собственные события, вы можете сделать это с помощью DOM api напрямую.

при моделировании щелчка, если у вас есть компонент, который отображает это:

<div>
   <button onClick={alert}>click me</button>
</div>

и у вас есть ссылка на <button/> в переменной под названием "buttonEl" и запустите это:

React.addons.TestUtils.Simulate.click(buttonEl, 'hello world');

вы получите предупреждение с "hello world" в нем. Все тесты utils создают виртуальное событие и позволяют ему пузыриться вверх по виртуальному дереву dom, вызывая обработчики событий по пути.

6

просто создать Event и направить его:

// Add an event listeners to the document
document.addEventListener('click', function() {
    console.log('test');
});

// Create a new `click` event and `dispatch` it
var event = new MouseEvent('click')
document.dispatchEvent(event)
0