test: 💍 upgrade test setup to react@19

Author: BuiltByWalsh

app/tests/layout.test.tsx

@@ -31,12 +31,6 @@ const TestComponent = () => {
 }
 
 describe('RootLayout', () => {
-  beforeAll(() => {
-    // ? NOTE: This is here because of `validateDOMNesting` warnings that come from testing layout.tsx files. @see https://github.com/testing-library/react-testing-library/issues/1250.
-    // ? NOTE: Should be able to fix for this in RTL + React 19.
-    vi.stubGlobal('console', { ...console, warn: vi.fn(), log: vi.fn(), error: vi.fn() })
-  })
-
   beforeEach(() => {
     vi.mocked(usePathname).mockReturnValueOnce('/')
   })
@@ -45,25 +39,22 @@ describe('RootLayout', () => {
     vi.clearAllMocks()
   })
 
-  afterAll(() => {
-    vi.unstubAllGlobals()
-  })
-
   it('displays the TopNavBar', async () => {
-    render(await RootLayout({ children: <TestComponent /> }))
+    render(await RootLayout({ children: <TestComponent /> }), { container: document })
 
     expect(screen.getByRole('navigation')).toBeInTheDocument()
   })
 
   it('displays the footer', async () => {
-    render(await RootLayout({ children: <TestComponent /> }))
+    render(await RootLayout({ children: <TestComponent /> }), { container: document })
 
     expect(screen.getByRole('contentinfo')).toBeInTheDocument()
   })
 
   it('includes ahrefs site verification', async () => {
-    const { container } = render(await RootLayout({ children: <TestComponent /> }))
+    const { container } = render(await RootLayout({ children: <TestComponent /> }), { container: document })
 
-    expect(container.querySelector('meta[name="ahrefs-site-verification"]')).toBeInTheDocument()
+    const ahrefsMetaTag = container.querySelector('meta[name="ahrefs-site-verification"]')
+    expect(ahrefsMetaTag).toBeInTheDocument()
   })
 })

components/app-shell/mode-toggle-menu.tsx

@@ -2,7 +2,6 @@
 
 import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
-import * as React from 'react'
 
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

components/app-shell/tests/mobile-menu.test.tsx

@@ -1,9 +1,15 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
 import { useTheme } from 'next-themes'
+import RSS from 'rss'
 
 import { MobileMenu } from '../mobile-menu'
 
+import { SITE_MAP_CATEGORIES } from '@/app/rss.xml/constants'
+import { EMAIL, JAMES_WALSH, PRODUCTION_URL, SITE_DESCRIPTION } from '@/lib/constants'
+
 const mockSetTheme = vi.fn()
 
 vi.mock('next-themes', () => ({
@@ -13,7 +19,28 @@ vi.mock('next/router', () => ({
   useRouter: vi.fn(),
 }))
 
+const server = setupServer(
+  http.get('/rss.xml', () => {
+    return HttpResponse.xml(
+      new RSS({
+        title: JAMES_WALSH,
+        description: SITE_DESCRIPTION,
+        site_url: PRODUCTION_URL,
+        feed_url: `${PRODUCTION_URL}/feed.xml`,
+        copyright: `${new Date().getFullYear()} ${JAMES_WALSH}}`,
+        managingEditor: EMAIL,
+        webMaster: EMAIL,
+        language: 'en-us',
+        pubDate: new Date(),
+        categories: SITE_MAP_CATEGORIES,
+      }).xml({ indent: true }),
+    )
+  }),
+)
+
 describe('components/app-shell/MobileMenu', () => {
+  beforeAll(() => server.listen())
+
   beforeEach(() => {
     vi.mocked(useTheme).mockReturnValue({
       theme: 'light',
@@ -24,8 +51,11 @@ describe('components/app-shell/MobileMenu', () => {
 
   afterEach(() => {
     vi.clearAllMocks()
+    server.resetHandlers()
   })
 
+  afterAll(() => server.close())
+
   it('renders the mobile menu as a sheet', () => {
     render(<MobileMenu />)
     expect(screen.getByTestId('mobile-menu-trigger')).toBeInTheDocument()
@@ -37,7 +67,7 @@ describe('components/app-shell/MobileMenu', () => {
     { dataTestId: 'about-nav-item', expectedText: /about/i },
     { dataTestId: 'stack-nav-item', expectedText: /stack/i },
     { dataTestId: 'portfolio-nav-item', expectedText: /portfolio/i },
-    { dataTestId: 'rss-feed-text-nav-item', expectedText: /get rss feed/i }, // TODO: In the future, using MSW for this would be preferred.
+    { dataTestId: 'rss-feed-text-nav-item', expectedText: /get rss feed/i },
     { dataTestId: 'mode-toggle-text-nav-item', expectedText: /toggle light mode|toggle dark mode/i },
   ])('displays nav item for $expectedText', async ({ dataTestId, expectedText }) => {
     const user = userEvent.setup()

components/app-shell/tests/mode-toggle-menu.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor, act } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { useTheme } from 'next-themes'
 
@@ -8,6 +8,7 @@ const mockSetTheme = vi.fn()
 
 vi.mock('next-themes', () => ({
   useTheme: vi.fn(),
+  setTheme: vi.fn(),
 }))
 
 describe('components/app-shell/ModeToggleMenu', () => {
@@ -48,7 +49,7 @@ describe('components/app-shell/ModeToggleMenu', () => {
       screen.getByRole('menu')
     })
 
-    await act(async () => await user.click(screen.getByRole('menuitem', { name: input })))
+    await user.click(screen.getByRole('menuitem', { name: input }))
 
     expect(mockSetTheme).toHaveBeenCalledOnce()
     expect(mockSetTheme).toHaveBeenCalledWith(expected)

components/icons/LinkedIn.tsx

@@ -14,9 +14,9 @@ export const LinkedIn = (props: HTMLAttributes<SVGElement>) => {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
       <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>

package.json

@@ -20,7 +20,7 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "lint": "next lint",
-    "lint:fix": "pnpm lint -- --fix",
+    "lint:fix": "pnpm lint --fix",
     "precommit": "pnpm spell && pnpm lint && pnpm format",
     "prepush": "pnpm typecheck && vitest --run",
     "prepare": "husky install",
@@ -67,9 +67,9 @@
     "@commitlint/cli": "19.6.0",
     "@commitlint/config-conventional": "19.6.0",
     "@playwright/test": "1.52.0",
-    "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/react": "16.0.1",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/node": "22.7.5",
     "@types/react": "19.1.5",
     "@types/react-dom": "19.1.5",
@@ -87,6 +87,7 @@
     "git-cz": "4.9.0",
     "happy-dom": "^15.11.7",
     "husky": "^8.0.3",
+    "msw": "2.8.4",
     "postcss": "^8.4.38",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.9",
@@ -99,6 +100,6 @@
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.8.3",
     "vite-tsconfig-paths": "^5.1.2",
-    "vitest": "^2.1.3"
+    "vitest": "3.1.4"
   }
 }