Pointer events are not triggered correctly in parent elements

[Parnswir]

Reproduction example

https://codesandbox.io/s/cool-leftpad-3djsvy?file=/README.md

Prerequisites

1. Render a container element and a child element (<div id="container"><div id="child">Content</div></div>)
2. Use await userEvent.hover(screen.getByText("Content")); to trigger a pointerenter event

Expected behavior

The container element should also get the pointer event.

Actual behavior

The container element does not get an event.

User-event version

14.1.1

Environment

"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^14.0.0",
"babel-jest": "^27.4.5",
"jest": "^28.0.3"

See https://github.com/Parnswir/user-event-14-hover-reproduction for working example with v13.5 (Parnswir/user-event-14-hover-reproduction@9d64c4c) and broken example with v14 (Parnswir/user-event-14-hover-reproduction@3a24bf0)

Additional context

Originally discussed in #944

cc: @ph-fritsche

[frabcus]

This is happening for me too - similar example to reproduce it https://github.com/frabcus/user-event-hover-child-bug with a test without the nested element (works) and with (doesn't work).

[ph-fritsche]

@all-contributors add @Parnswir bug

[allcontributors]

@ph-fritsche

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

[github-actions]

🎉 This issue has been resolved in version 14.4.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀