ReactTestUtils.Simulate cannot initiate addEventListener event binding?

Question

Here is an example:

http://jsfiddle.net/hulufei/twr4thuh/7/

It just worked when bind onClick in a virtual dom (e.g. line 18), but if I comment out line 18 and comment out line 8 to associate the click with addEventListener , this did not work.

So what's the problem?

Answer 1

TestUtils fires events inside a responsive synthetic event system, so the native event that addEventListener listens for will never be fired. You will need to use your own click method for the element in your test:

  var events = Events(); ReactTestUtils.renderIntoDocument(events); events.refs.button.getDOMNode().click(); events.state.event.should.equal('click'); 

Also, in the definition of addEventListener you made a mistake with clickHandler .

jsfiddle

You can also simplify adding your event listener by reusing the prop definition:

 componentDidMount: function () { this.refs.button.getDOMNode().addEventListener('click', this.clickHandler); }, 

Note:

Is there a reason why you want to use addEventListener instead of the simple onClick attribute for your button? If there is no specific and compelling reason for this, I would suggest doing something different when I handled events for sanity :)

Edit

I initially mentioned that I did not know that TestUtils SimulateNative.click did not trigger an event. I was mistaken in thinking that it would ever be, since it would simulate a natural click event in a parity response system. @thilo pointed me in the right direction :)

Answer 2

I had a lot of problems when testing addEventListener, and I got the following conclusion.

You can create an event listener using pure javascript, jquery, but when running tests with Jest I always had a problem.

Rendering ReactTestUtils does not work directly with the document, and when we do:

For example, our events were added to a document, when rendering with ReactTestUtils, it creates a div and displays it in a div. Thus, I could not get Simulate to invoke the call.

My first solution was to use jquery to create a listener and verify that I did the rendering manually by adding a div to document.body and triggering events using the javascript dispatcher. But I thought the code was dirty, not the best way to work.

I made a code example, adding an event and testing it with Jest, we also get test training to get the whole created listener.

The code can be found here: https://github.com/LVCarnevalli/create-react-app/tree/master/src/components/datepicker

component:

 componentDidMount() { ReactDOM.findDOMNode(this.datePicker.refs.input).addEventListener("change", (event) => { const value = event.target.value; this.handleChange(Moment(value).toISOString(), value); }); } 

Test:

 it('change empty value date picker', () => { const app = ReactTestUtils.renderIntoDocument(<Datepicker />); const datePicker = ReactDOM.findDOMNode(app.datePicker.refs.input); const value = ""; const event = new Event("change"); datePicker.value = value; datePicker.dispatchEvent(event); expect(app.state.formattedValue).toEqual(value); }); 

References:

window.addEventListener is not triggered by simulated events: https://github.com/airbnb/enzyme/issues/426

Creating and triggering events: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events