Simülasyona tıklayın Simülasyona tıklayın ReactJS/JSDom

Question

Bu yüzden, belgede bir tıklama olayı ekleyen kod için bazı testler yazıyorum. JSDom, ReactJS ve Mocha/Chai kurulumunu kullanıyorum. Aşağıdaki kodu bir sınamada denedim, ancak bu kod beklediğim yankıyı oluşturmaz, ancak bu kod bir testte şu kodu denedim:

JSDom ve ReactJS ile belgedeki tıklatmayı, anahtarlamayı vb. Taklit etmenin bir yolu var mı?

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

document.body.click(); 

ve ben konsol günlüğü çıktısını alamadım ayırana dek: Nick cevapları için

GÜNCELLEME

, ben test etmek için bu kodu ekleyerek çalıştılar. JSDom ile ilgili bir sorun olup olmadığından ve bu tür bir şey yapıp yapmadığından emin değilim.

Bu kodu sınamaya ayarlayamazsam, sorun değil, şu anda sınama yapamayacağım bir kod zaten var (kod, genişlik, yükseklik vb. Elde edebilmek için gerçek bir DOM gerektirir). .) Ancak kodun çoğunu test edebilmek istiyorum (ve birim testi için PhantomJS kullanmak istemiyorum). Entegrasyon testlerim o kod tipini kapsayacaktır.

Update2

Unutulmaması gereken başka bir şey ben console.log(document); ben nesne yüzden olay ekli ediliyor biliyoruz click için _listeners özelliğine bağlı görünce, sadece olmak görünmüyor olmasıdır yürütülmesi.

Answer 1

Güncelleme:document.body.click bir tarayıcıda çalışacaktır ancak jsdom için manuel etkinlik oluşturmak gerekir:

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

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

Yukarıdaki kod Jest benim için çalışıyor ve "yalnız" jsdom ile çalışmalıdır de.

Answer 2

React.addons.TestUtils.Simulate yalnızca sanal olaylarla çalışır. Yerel etkinlikleri göndermek istiyorsanız, bunu doğrudan DOM api ile yapabilirsiniz.

bir tıklama simüle zaman, bu işler bir bileşeni varsa:

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

Ve 'buttonEl' adlı bir değişkende <button/> bir başvuru var ve bu çalıştırın:

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

İçinde 'merhaba dünya' ile bir uyarı alırsınız. Tüm sınama araçları, sanal olayı oluşturur ve sanal dom ağacını kabarcıklar, olay işleyicileri yol boyunca çağırır.

Answer 3

Basitçe bir Event oluşturmak ve sevk:

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