Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
antsmartian opened this issue Apr 6, 2018 · 12 comments

Comments

@antsmartian
Copy link

commented Apr 6, 2018

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

This comment has been minimized.

Copy link

commented Apr 11, 2018

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

This comment has been minimized.

Copy link

commented Apr 11, 2018

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 comment has been minimized.

Copy link
Collaborator

commented Apr 12, 2018

This seems answered.

@ljharb ljharb closed this Apr 12, 2018

@ljharb ljharb added the question label Apr 12, 2018

@antsmartian

This comment has been minimized.

Copy link
Author

commented Apr 12, 2018

@btkfrank @ljharb Thanks!

@LukasZvikas

This comment has been minimized.

Copy link

commented Nov 7, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Nov 7, 2018

@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

This comment has been minimized.

Copy link

commented Feb 4, 2019

@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

This comment has been minimized.

Copy link
Collaborator

commented Feb 4, 2019

@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

This comment has been minimized.

Copy link

commented Feb 4, 2019

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

@ljharb

This comment has been minimized.

Copy link
Collaborator

commented Feb 4, 2019

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

@jedwards1211

This comment has been minimized.

Copy link

commented Feb 4, 2019

@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

This comment has been minimized.

Copy link
Collaborator

commented Feb 4, 2019

Nothing has changed with simulate since its creation, afaik.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.