Why to avoid .simulate? Rather use props to call fn directly?

[antsmartian]

Well, this is not exactly an issue but a question.

I face the same issue as others had face like:
#1473
#1081

Interestingly, most of the comments suggest that:

avoid .simulate entirely; it's best to invoke your prop function directly.

Yes, the suggested method works, but I just wanted to understand why that is the case? Is that something enzyme can't do well or enzyme actually uses React.simulate under the hood, which has these problems? Also can't we use dispatchEvent on that element? What your thoughts on this?

Thanks for your time on this.

[btkfrank]

My understanding is Jest/enzyme is using JS DOM, which is not real DOM, it has problem mocking browser event.

There is a brief Gotchas section at the end of the simulate API doc,

Common Gotchas
Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a result, one must call .simulate() on the actual node that has the event handler set.
Even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it.

http://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html

[btkfrank]

Yes. The problem is that "simulate" doesn't actually simulate anything - it just invokes a prop. So, it's better for your test to explicitly invoke a prop.

Copied from https://github.com/airbnb/enzyme/issues/1054

[ljharb]

This seems answered.

[antsmartian]

@btkfrank @ljharb Thanks!

[LukasZvikas]

Hello, @ljharb, I have a question for you, if you don't mind. I saw you were saying that it's better to invoke functions directly, without simulate, so what would be the proper way to test onChange event with an event parameter? Is it enough to check if it was called or there is more that has to be done? I would appreciate your advice, thanks.

[ljharb]

@LukasZvikas you don't need to test the event, you need to test the onChange handler. So, you'd do wrapper.prop('onChange')(). You don't need to test that it's been called - react and the browser handle that, and that's their job to test, not yours.

[jedwards1211]

@ljharb if our event handler calls .preventDefault() or .stopPropagation() what is your recommendation? .simulate seems to at least pass a mock event that has those methods; extra work is required to make a mock event when calling the event handler directly.

[ljharb]

@jedwards1211 pass { preventDefault() {}, stopPropagation() {} } as your event object? I understand it's extra work; I'm saying that it's still more explicit and a better approach to do it.

[jedwards1211]

@ljharb okay, really I was just wondering if we could call whatever enzyme uses to create the mock event without using .simulate

[ljharb]

@jedwards1211 note that mount requires you pass an event; only shallow creates one via react-dom/test-utils.

[jedwards1211]

@ljharb huh, I only ever use mount, but .simulate seems to be creating the event just fine in a project currently using enzyme 3.3.0. Has something changed in more recent versions?

[ljharb]

Nothing has changed with simulate since its creation, afaik.