userEvent not firing on table row-CodePudding

I have a table component where I add an onClick handler to all trs. The click handler works fine n the browser. When it comes to write a test using testing library I can only get it work by using fireEvent. When I try to replace this with userEvent the click handler is not called. I'm aware that adding click handler to trs has some issues with accessibility, but I would like to understand why its not triggered using userEvent

render( <Table />)
const row = screen.queryAllByTitle('Show details')[0]
userEvent.click(row)
expect(screen.queryByText('Details')).toBeTruthy()

and the row:

<tr
  title="Show details"
  onClick={showDetails}
  role="button"
>
  <td>....
</tr>

CodePudding user response：

userEvent is async. You can make the following changes if you want to use useEvent

test('test row onClick', async () => {
  render( <Table />)
  const row = screen.queryAllByTitle('Show details')[0]
  await userEvent.click(row)
  expect(screen.queryByText('Details')).toBeTruthy()
})