Migrate from fireEvent to user-events

[codyebberson]

While trying to write tests for <CopyButton> (#2634), I found it quite difficult to properly test the hover events and delayed effects. I looked into how Mantine tests those things, and it turns out internally they use user-event:

https://testing-library.com/docs/user-event/intro/#difference-to-fireevent

When to use userEvent.click and when to use fireEvent

Behind the scenes, userEvent uses the fireEvent. You can consider fireEvent being the low-level api, while userEvent sets a flow of actions.

Here is the code for userEvent.click

You can see that depending of which element you are trying to click, userEvent will do a set of different actions (e.g. if it's a label or a checkbox).

There are probably many cases in react and app that could benefit from this.

[Paul-Taiwo]

@codyebberson I would like to work on this.