Change:
While testing I wanted to simulate and events, but for some reason they are not firing the handlers in the component. Here's a fiddle to show you: You'll see that with the Simulate functions, only the click is actually triggered, while the other ones not. With the real events everything works perfectly. I tried to debug a little bit what's going on, but didn't get much information, especially since it's the first time I'm diving into the events mechanism internals in React. If you want more info, then I can try and dig a bit deeper, but I think the fiddle is clear enough.
Yeah, unfortunately mouseEnter/mouseLeave don't get simulated properly at the moment due to their unique bubbling situation. The biggest blocker here is picking a good API, I think. Maybe just ?
Why should the user care about where the mouse moves from/to? Perhaps this can be handled internally? Is the problem due to bubbling here? I may need to dive into the code a little more to get a better understanding and stop saying nonsense :P
Yes, it's due to bubbling. If you have the DOM structure and your mouse moves from C to D, then C and B receive mouseleave events, D receives a mouseenter event, and A receives nothing. All other events bubble up to the root. Perhaps it's good enough to just make simulated mouseEnter and mouseLeave events not bubble at all.
That would work at least where I was trying to test. While testing I generally don't need anything too complex, just making sure the right behavior triggers when the event happens. Hopefully that's the way others do as well
(As a workaround for now, you can use SimulateNative.mouseOver and SimulateNative.mouseOut (making sure to specify relatedTarget appropriately on each) and together they will cause React to fire onMouseEnter and onMouseLeave events.)
Do we have a good solution for such case now? I'm trying my solution but feeling so tricky. And I got still quite strange results:
can you give an example. I can't find any documentation on SimulateNative or how to set relatedTarget appropriately?
You want to do something like this: The simulates the mouse moving one element another. The element can be anything really, it’s not important.
Do we have a good solution for such case now? or It can not be solved?
I am manually applying this patch until it is pulled into the core:
Any update on this?
I was able to get my tests to pass using SimulateNative. Here's my codez: Test results:
I tried that using both and instead of but it still did not trigger my event.
If it helps - the difference which worked for me was calling with a and not a . Pass & fail states listed along with full test case below: This seems to also work:
No update so far? Maybe some workarounds?
This was fixed in in April as you can see a few messages up; it'll be in the 0.14 release. If you search "workaround" on this page you'll see that I also posted a workaround over a year ago.
Sorry, really missed it. Thanks for it!

Discussion:
var ON_CLICK_KEY = keyOf({onClick: null}); var ON_TOUCH_TAP_KEY = keyOf({onTouchTap: null}); var ON_CHANGE_KEY = keyOf({onChange: null}); <ins> var ON_MOUSE_ENTER_KEY = keyOf({onMouseEnter: null}); </ins> /**

expect(handleParentClick.mock.calls.length).toBe(0); }); <ins> it('should have mouse enter simulated by test utils', function() { ReactBrowserEventEmitter.putListener( getID(CHILD), ON_MOUSE_ENTER_KEY, recordID.bind(null, getID(CHILD)) ); ReactTestUtils.Simulate.mouseEnter(CHILD); expect(idCallOrder.length).toBe(1); expect(idCallOrder[0]).toBe(getID(CHILD)); }); </ins> it('should infer onTouchTap from a touchStart/End', function() { ReactBrowserEventEmitter.putListener( getID(CHILD),

node = domComponentOrNode; } <ins> var dispatchConfig = ReactBrowserEventEmitter.eventNameDispatchConfigs[eventType]; </ins> var fakeNativeEvent = new Event(); fakeNativeEvent.target = node; // We don't use SyntheticEvent.getPooled in order to not have to worry about // properly destroying any properties assigned from `eventData` upon release var event = new SyntheticEvent( <del> ReactBrowserEventEmitter.eventNameDispatchConfigs[eventType], </del> <ins> dispatchConfig, </ins> ReactMount.getID(node), fakeNativeEvent ); assign(event, eventData); <del> EventPropagators.accumulateTwoPhaseDispatches(event); </del> <ins> if (dispatchConfig.phasedRegistrationNames) { EventPropagators.accumulateTwoPhaseDispatches(event); } else { EventPropagators.accumulateDirectDispatches(event); } </ins> ReactUpdates.batchedUpdates(function() { EventPluginHub.enqueueEvents(event);