Cannot test components built using antd-components with @testing-library/userevent

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/manish3323/esw-ocs-eng-ui

Steps to reproduce

git clone https://github.com/manish3323/esw-ocs-eng-ui
npm install 
npm test

all tests passes successfully on main branch (it has testing-library/userevent version : 12.8.3)

---

gco manish/userevent
npm install 
npm test 

Tests fails on this branch, as this branch is using latest version of testing-library/userevent.

---

Problem / issue : various ant-d components like Dropdown,Popconfirm,Tooltip assigns css style pointer-events:none to its child component (button/link).

this particular style is getting applied from this location. https://github.com/ant-design/ant-design/blob/HEAD/components/button/style/index.less line no : 118

  &::before {
    position: absolute;
    top: -@btn-border-width;
    right: -@btn-border-width;
    bottom: -@btn-border-width;
    left: -@btn-border-width;
    z-index: 1;
    display: none;
    background: @component-background;
    border-radius: inherit;
    opacity: 0.35;
    transition: opacity 0.2s;
    content: '';
    pointer-events: none;                         <--------- should this style ever be added on button component ? 
  }

user event’s latest version states that it will throw error if element has pointer-events:none style assigned to it. refer here for more details on this : https://github.com/testing-library/user-event#clickelement-eventinit-options

Why ? Since testing-library mainly emphasise on user-accessibility. it would be good to have ant-d components follow it ?

What is expected?

child components of Button, Dropdown, PopConfirm, Tooltip should not have pointer-events: none style

What is actually happening?

Components like Button, Dropdown,PopConfirm, Tooltip assigns child pointer-events class to its child component

Environment	Info
antd	4.15.3
React	17.0.2
System	Mac os 10.14.6
Browser	Brave Version: 1.23.73, Chromium: 90.0.4430.85 (Official Build) (x86_64)

[samkahchiin]

i got this issue on two instances:

1. when the button is placed on a modal, dropdown ( a overlay) & i tried to click on it.
2. when i tried to enter some texts in input field using userevent.type(elem,'asadbaf').

to solve 1st , await wiatFor () worked. to solve 2nd, i had to do it in 2 steps, earlier :

const textbox = screen.getByRole('textbox')
userEvent.type(textbox, 'asdadasd')

fix:

   const textbox = screen.getByRole('textbox')
    await waitFor(() => userEvent.click(textbox))
    userEvent.type(textbox, 'asdasd')

@Manish3323 I still faced the same issues after trying your fix. Is there any other setup that I need to do besides putting userEvent in await waitFor() ?

[luffySAMA]

I have the same problem, how do you slove this problem?