test: use testing-library/user-event v14

package.json

@@ -30,7 +30,7 @@
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.1.1",
     "@types/node": "^17.0.31",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",

src/__tests__/App.test.tsx

@@ -1,23 +1,21 @@
-import { render, screen, userEvent, act } from '@utils/test/app-test-utils'
+import { render, screen } from '@utils/test/app-test-utils'
 import App from '@src/App'
 
-test('should render App with Homepage first and navigate through pages', () => {
-  // @testing-library/user-event v14 doesn't trigger a rerender.
-  // eventually fix this issue and remove the act() calls.
+test('should render App with Homepage first and navigate through pages', async () => {
+  const { user } = render(<App />)
 
-  render(<App />)
   // start with Homepage
   expect(screen.getByRole('heading', { name: /Homepage/i })).toBeInTheDocument()
 
   // navigate to About page
-  act(() => userEvent.click(screen.getByRole('link', { name: /go to about/i })))
-  expect(screen.getByRole('heading', { name: /About/i })).toBeInTheDocument()
+  user.click(screen.getByRole('link', { name: /go to about/i }))
+  expect(await screen.findByRole('heading', { name: /About/i })).toBeInTheDocument()
 
   // navigate to Fetch page
-  act(() => userEvent.click(screen.getByRole('link', { name: /go to fetch/i })))
-  expect(screen.getByRole('heading', { name: /fetch/i })).toBeInTheDocument()
+  user.click(screen.getByRole('link', { name: /go to fetch/i }))
+  expect(await screen.findByRole('heading', { name: /fetch/i })).toBeInTheDocument()
 
   // navigate to Homepage page
-  act(() => userEvent.click(screen.getByRole('link', { name: /go to homepage/i })))
-  expect(screen.getByRole('heading', { name: /Homepage/i })).toBeInTheDocument()
+  user.click(screen.getByRole('link', { name: /go to homepage/i }))
+  expect(await screen.findByRole('heading', { name: /Homepage/i })).toBeInTheDocument()
 })

src/utils/test/app-test-utils.ts

@@ -1,11 +1,22 @@
 import { render as rtlRender } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 import type { RenderOptions, RenderResult } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { UserEvent } from '@testing-library/user-event/dist/types/setup'
 import AppProviders from '@src/context/app-providers'
 
-function render(ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult {
-  return rtlRender(ui, { wrapper: AppProviders, ...options })
+type CustomRenderResult = {
+  user: UserEvent
+} & RenderResult
+
+function customRender(
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'queries'>
+): CustomRenderResult {
+  return {
+    user: userEvent.setup(),
+    ...rtlRender(ui, { wrapper: AppProviders, ...options }),
+  }
 }
 
 export * from '@testing-library/react'
-export { render, userEvent }
+export { customRender as render }

yarn.lock

@@ -619,12 +619,10 @@
     "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "^18.0.0"
 
-"@testing-library/user-event@^13.5.0":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+"@testing-library/user-event@^14.1.1":
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.1.1.tgz#e1ff6118896e4b22af31e5ea2f9da956adde23d8"
+  integrity sha512-XrjH/iEUqNl9lF2HX9YhPNV7Amntkcnpw0Bo1KkRzowNDcgSN9i0nm4Q8Oi5wupgdfPaJNMAWa61A+voD6Kmwg==
 
 "@tootallnate/once@2":
   version "2.0.0"