문서의 시뮬레이션 클릭 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가있는 문서에서 클릭, 키 업 등을 시뮬레이션하는 방법이 있습니까?

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

document.body.click(); 

나는 콘솔 로그 출력을하지 않는 경작한다 : 닉의 답변을

UPDATE

, 나는 시험이 코드를 추가하는 시도했습니다. JSDom에 문제가 있는지, 이런 종류의 일을하는지 확실하지 않습니다.

이 코드를 단위 테스트 할 수 없다면, 지금 단위 테스트를 할 수없는 코드가 이미 있습니다 (실제 DOM에 너비, 높이 등을 가져올 수있는 코드가 필요합니다). .)하지만 나는 대부분의 코드를 단위 테스트 할 수 있기를 원한다. (그리고 유닛 테스트를 위해 PhantomJS를 사용하는 것에 관심이 없다.) 내 통합 테스트에서 해당 유형의 코드를 다룰 것입니다.

UPDATE2

주목해야 할 또 다른 것은 그게 내가 console.log(document); 내가 개체 그래서 나는 이벤트가 부착되어 알고 click에 대한 _listeners 속성에 부착 볼 때, 그냥 될 것 같지 않습니다이다 실행 중.

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) 

위의 코드는 농담으로 나를 위해 작동하고 "솔로"jsdom와 함께 작동합니다을 게다가.

Answer 2

React.addons.TestUtils.Simulate는 가상 이벤트에서만 작동합니다. 기본 이벤트를 전달하려는 경우 DOM API를 사용하여 직접 수행 할 수 있습니다.

클릭을 시뮬레이션 할 때,이 렌더링 구성 요소가있는 경우 :

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

을 그리고 당신은 'buttonEl'라는 변수에 <button/>에 대한 참조를 가지고 있고,이 실행

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

을

'hello world'라는 경고가 표시됩니다. 모든 테스트 유틸리티는 가상 이벤트를 생성하고 가상 DOM 트리를 버블 링하여 이벤트 핸들러를 호출합니다.

Answer 3

단순히 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)