React-testing-library: Setting pointerEvents to 'none' does not disable clicking

[LukenAgile42]

import 'react-testing-library/cleanup-after-each'
import React from "react";
import {
    render,
    fireEvent
} from "react-testing-library";
import "jest-dom/extend-expect";


test("Setting pointEvents to none disables clicking", () => {
    const onFooClick = jest.fn()
    const {getByTestId} = render(
            <button data-testid="foo"  onClick={onFooClick}
              style={{pointerEvents: 'none'}}
    />)
    getByTestId("foo").style.pointerEvents = 'none'
    fireEvent.click(getByTestId("foo"))
    expect(getByTestId("foo").style.pointerEvents).toEqual('none') //passes
    expect(onFooClick).not.toHaveBeenCalled() //fails
})

"jest-dom": "^3.1.3", "react": "^16.8.6", "react-dom": "^16.8.6", "react-grid-layout": "^0.16.6", "react-scripts": "2.1.1", "react-testing-library": "^6.1.2"

[kentcdodds]

Hi @LukenAgile42,

This is true whether you use react-testing-library or not. Even if you style it to have pointerEvents: 'none', if you dispatch a click event on the element, it'll still call event handlers.

My recommendation: Don't fire a click event if you don't want the click handler called. If you want to verify that pointerEvents: 'none' is working properly, then I think you're wasting your time honestly. Trust that the browser does its job correctly and don't bother testing this.

Either way, there's nothing we're going to do in this library to change this behavior. You may be able to make this library do it though: https://github.com/Gpx/user-event

Good luck!