test(events): replace fire event with user event

src/Modal.test.tsx

@@ -1,9 +1,10 @@
-import { render, screen, fireEvent } from "@testing-library/react"
+import { render, screen } from "@testing-library/react"
 import { axe } from "jest-axe"
+import userEvent from "@testing-library/user-event"
 
-import { Modal } from "./Modal"
+import { Modal } from "./"
 
-// create react-app root div element so we can assert aria-hidden is true
+/** create react-app root div element so we can assert aria-hidden is true */
 const root = document.createElement("div")
 
 const onClose = jest.fn()
@@ -33,7 +34,9 @@ it("should have no a11y violations", async () => {
   expect(results).toHaveNoViolations()
 })
 
-it("should call onClose when escape or close buttons are pressed", () => {
+it("should call onClose when escape or close buttons are pressed", async () => {
+  const user = userEvent.setup()
+
   render(
     <Modal onClose={onClose} title="Title" description="Description">
       <button type="button" onClick={onClose}>
@@ -42,13 +45,13 @@ it("should call onClose when escape or close buttons are pressed", () => {
     </Modal>
   )
 
-  fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" })
+  await user.keyboard("{Escape}")
   expect(onClose).toHaveBeenCalledTimes(1)
 
-  fireEvent.click(screen.getByText("X"))
+  await user.click(screen.getByText("X"))
   expect(onClose).toHaveBeenCalledTimes(2)
 
-  fireEvent.click(screen.getByText("Save & Close"))
+  await user.click(screen.getByText("Save & Close"))
   expect(onClose).toHaveBeenCalledTimes(3)
 })
 
@@ -109,7 +112,9 @@ it("document body should have `overflow: hidden` - not scrollable", () => {
   expect(document.body).toHaveStyle("overflow: hidden")
 })
 
-it("focus should be trapped in a loop when `Tab` key is continiously pressed", () => {
+it("focus should be trapped in a loop when `Tab` key is continiously pressed", async () => {
+  const user = userEvent.setup()
+
   render(
     <Modal onClose={onClose} title="Title" description="Description">
       <button onClick={onClose}>Close</button>
@@ -118,16 +123,18 @@ it("focus should be trapped in a loop when `Tab` key is continiously pressed", (
 
   expect(screen.getByText("X")).toHaveFocus()
 
-  fireEvent.keyDown(screen.getByRole("dialog"), { key: "Tab" })
+  await user.keyboard("{Tab}")
 
   expect(screen.getByText("Close")).toHaveFocus()
 
-  fireEvent.keyDown(screen.getByRole("dialog"), { key: "Tab" })
+  await user.keyboard("{Tab}")
 
   expect(screen.getByText("X")).toHaveFocus()
 })
 
-it("should not focus a disabled element and it should be ignored and skipped by `Tab` key", () => {
+it("should not focus a disabled element and it should be ignored and skipped by `Tab` key", async () => {
+  const user = userEvent.setup()
+
   render(
     <Modal onClose={onClose} title="Title" description="Description">
       <button disabled>Disabled close</button>
@@ -137,13 +144,15 @@ it("should not focus a disabled element and it should be ignored and skipped by
 
   expect(screen.getByText("X")).toHaveFocus()
 
-  fireEvent.keyDown(screen.getByRole("dialog"), { key: "Tab" })
+  await user.keyboard("{Tab}")
 
   expect(screen.getByText("Disabled close")).not.toHaveFocus()
   expect(screen.getByText("Enabled close")).toHaveFocus()
 })
 
-it("should not focus a `tabIndex={-1}` element and it should be ignored and skipped by `Tab` key", () => {
+it("should not focus a `tabIndex={-1}` element and it should be ignored and skipped by `Tab` key", async () => {
+  const user = userEvent.setup()
+
   render(
     <Modal onClose={onClose} title="Title" description="Description">
       <button tabIndex={-1}>Tab Index 0</button>
@@ -153,7 +162,7 @@ it("should not focus a `tabIndex={-1}` element and it should be ignored and skip
 
   expect(screen.getByText("X")).toHaveFocus()
 
-  fireEvent.keyDown(screen.getByRole("dialog"), { key: "Tab" })
+  await user.keyboard("{Tab}")
 
   expect(screen.getByText("Tab Index 0")).not.toHaveFocus()
   expect(screen.getByText("Close")).toHaveFocus()

src/Portal.test.tsx

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react"
 import { axe } from "jest-axe"
 
-import { Portal } from "./Portal"
+import { Portal } from "./"
 
 it("should have no a11y violations", async () => {
   const { baseElement } = render(