Simulieren klicken auf Dokument ReactJS/JSDom

Question

So schreibe ich einige Tests für Code, der ein Klickereignis auf dem Dokument hinzufügt. Ich verwende JSDom, ReactJS und Mocha/Chai Setup. Ich habe den folgenden Code in einem Test ausprobiert:

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

jedoch erzeugt dieser Code nicht das Echo, das ich erwarte.

Gibt es eine Möglichkeit, Klick, Keyup, etc ... auf dem Dokument mit JSDom und ReactJS zu simulieren?

UPDATE

Um Nick Antworten, ich habe versucht, diesen Code zum Test hinzufügen:

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

document.body.click(); 

und ich bis nicht die Konsole Protokollausgabe erhalten. Ich bin mir nicht sicher, ob es ein Problem mit JSDom gibt und so etwas macht.

Wenn ich diesen Code nicht testen kann, ist das in Ordnung, es gibt bereits Code, den ich momentan nicht testen kann (Code, der ein echtes DOM benötigt, um Breiten, Höhen usw. zu erhalten). .), aber ich würde gerne in der Lage sein, den größten Teil des Codes zu testen (und ich bin nicht daran interessiert, PhantomJS für Komponententests zu verwenden). Meine Integrationstests werden diese Art von Code abdecken.

UPDATE2

andere Sache zu beachten ist, dass das ist, wenn ich console.log(document); ich Objekt sehen an der _listeners Eigenschaft für click so weiß ich das Ereignis angebracht wird, es scheint einfach nicht zu sein Ausführen.

Answer 1

Update:document.body.click wird in einem Browser arbeiten, aber für jsdom Sie müssen manuell das Ereignis erstellen:

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

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

Der obige Code wird in Jest für mich arbeiten und sollte mit "Solo" jsdom arbeiten auch.

Answer 2

React.addons.TestUtils.Simulate funktioniert nur mit virtuellen Ereignissen. Wenn Sie native Ereignisse versenden möchten, können Sie dies direkt mit der DOM API tun.

Wenn ein Klick simulieren, wenn Sie eine Komponente, die das macht:

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

: diese

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

Und Sie haben einen Verweis auf die <button/> in einer Variablen namens ‚buttonEl‘ und laufen

Sie erhalten eine Warnung mit "Hallo Welt" drin. Alle Test-Utils erstellen das virtuelle Ereignis und lassen es die virtuelle Baumstruktur aufblähen, wobei die Ereignisbehandlungsroutinen auf dem Weg aufgerufen werden.

Answer 3

einfach ein Event erstellen und versenden es:

// 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)