Skip to content

fireEvent used with pointerEnter and pointerLeave don't fire in React #783

Closed
@itaylor

Description

@itaylor
  • @testing-library/react version: 11.0.2
  • Testing Framework and version: Jest 26.4.2
  • DOM Environment: jsdom

Relevant code or config:

https://codesandbox.io/s/react-testing-library-demo-forked-fkjt7?file=/src/__tests__/HoverTest.test.js
https://codesandbox.io/s/react-testing-library-demo-forked-fkjt7?file=/src/HoverTest.js

What you did:

I am trying to test PointerEvents that had been converted from MouseEvents. The pointerEnter pointerLeave don't work the same as the mouseEnter mouseLeave in testing library, but works fine in the browser.

What happened:

When I use fireEvent.pointerEnter in my test, my React component's onPonterEnter handler is not hit.

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-forked-fkjt7?file=/src/__tests__/HoverTest.test.js

Problem description:

It's highly confusing that firing pointerEnter doesn't cause react onPointerEnter to fire.

Suggested solution:

In #588 mouseEnter/mouseLeave had special handlers added to deal with the fact that React doesn't attach the native event and instead uses mouseOver / mouseOut. I think the same fix should be made for pointerEnter / pointerLeave

You wan work around this by firing pointerOver / pointerOut, but this is not ideal, as it requires the user to understand React's event model.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions