fix: make fireEvent mouseEnter/mouseLeave work with addEventListener

[zbrogz]

(#577)

What:
Make fireEvent.mouseEnter and fireEvent.mouseLeave work with events added using addEventListener.

Why:
There is no way to trigger a native mouseEnter/mouseLeave event using React Testing Library. A workaround is to manually use dispatchEvent, but it's not as convenient as fireEvent. The reason for this limitation is due to how React handles mouseEnter/mouseLeave: facebook/react#12978

How:
Instead of setting fireEvent.mouseEnter/Leave to fireEvent.mouseOver/Out, set fireEvent.mouseEnter/Leave to call both mouseEnter/Leave and fireEvent.mouseOver/Out.

This makes the behavior match other events that can be called with fireEvent. For example, if one click handler was added to an element with addEventListener and another was added to the component directly with <button onClick={handleClick}>..., fireEvent.click(button) calls both click handlers.

Checklist:

• Documentation added to the N/A
  docs site
• Tests N/A
• Typescript definitions updated N/A
• Ready to be merged
  

Credit to @jessethomson

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

Merging #588 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #588   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           3      3           
  Lines          95    103    +8     
  Branches       15     15           
=====================================
+ Hits           95    103    +8

Impacted Files	Coverage Δ
src/pure.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 24fc9b0...a40842d. Read the comment docs.

[greypants]

🎉 Thanks! Seems like the right solution.

Maybe add the tests for the specific issue this solves. At least the one that would have previously failed?

test('fires native mouseEnter/mouseLeave events', () => {...}

They were enumerated here: #577 (comment)

[weyert]

Cool, thanks, @zbrogz, well done :D

[zbrogz]

I'll update this with tests.

[kentcdodds]

Thank you so much for this. I would love a test as well.

Is there a real world scenario where people would have to callbacks called unexpectedly?

[zbrogz]

I added tests to verify that all native events can be triggered using fireEvent. A couple caveats:

1. Native onSelect isn't passing for some reason.
2. onDoubleClick maps to dblclick.

If the scope of this is too big, I'll remove this and just write a test limited to onMouseEnter/onMouseLeave, like mentioned earlier.

Edit: I have a fix for native onSelect test not passing. It's similar to the onMouseLeave/Enter issue. Let me know if I should commit the change or if that should go in a different PR.

[zbrogz]

Is there a real world scenario where people would have two callbacks called unexpectedly?

I don't believe so. This makes it so fireEvent.onMouseLeave/Enter is consistent with the way other events work: both the native (added with addEventListener) and react (passed using onEventName prop) event handlers should get called.

[zbrogz]

@kentcdodds Do you mind taking a look at this again?

[kentcdodds]

I'm liking this. Just a few thoughts on how to change this slightly. Thanks!

[kentcdodds]

Should doubleclick even be in the events list?

Also, select probably doesn't work because JSDOM, which is unfortunate.

I probably wouldn't implement things this way and instead I would just have if statements in the test itself for each of these individually with comments explaining why these are special cases. No reason to have this indirection/abstraction.

[zbrogz]

@kentcdodds I made some changes based on your feedback.

instead I would just have if statements in the test itself for each of these individually with comments explaining why these are special cases

Done

Should doubleclick even be in the events list?

I think it makes sense to test both the doubleClick (synthetic) and dblclick (native) events.

Also, select probably doesn't work because JSDOM, which is unfortunate.

I included a fix for this in the latest commit.

[kentcdodds]

Terrific 👍👍

[kentcdodds]

@all-contributors please add @zbrogz for code and tests

[allcontributors]

@kentcdodds

I've put up a pull request to add @zbrogz! 🎉

[kentcdodds]

🎉 This PR is included in version 9.4.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀