test: add integration test for 404 page rendering on unknown routes

src/App.tsx

@@ -2,23 +2,16 @@ import Lenis from 'lenis';
 import { useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { createBrowserRouter, RouterProvider } from 'react-router';
-import HomePage from './pages/HomePage';
-import NotFoundPage from './pages/NotFoundPage';
+import { routes } from './routes';
 
-const router = createBrowserRouter([
-	{
-		path: '/',
-		element: <HomePage />,
-	},
-	{
-		path: '*',
-		element: <NotFoundPage />,
-	},
-]);
+const router = createBrowserRouter(routes);
 
 function App() {
 	useEffect(() => {
-		const lenis = new Lenis({ duration: 1.2, easing: t => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
+		const lenis = new Lenis({
+			duration: 1.2,
+			easing: t => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+		});
 		function raf(time: number) {
 			lenis.raf(time);
 			requestAnimationFrame(raf);

src/pages/__tests__/NotFoundPage.integration.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { createMemoryRouter, RouterProvider } from 'react-router';
+import { describe, expect, it } from 'vitest';
+import { routes } from '@/routes';
+
+describe('NotFoundPage Integration', () => {
+	it('renders NotFoundPage when navigating to an unknown route', () => {
+		const router = createMemoryRouter(routes, {
+			initialEntries: ['/unknown-path-xyz'],
+		});
+
+		render(<RouterProvider router={router} />);
+
+		// Assert the NotFoundPage content is rendered
+		expect(
+			screen.getByRole('heading', {
+				name: /this marketplace path is not live yet/i,
+			})
+		).toBeInTheDocument();
+
+		// Assert the page title or heading contains a 404 or not found message
+		expect(screen.getByText(/route not found/i)).toBeInTheDocument();
+	});
+});

src/routes.tsx

@@ -0,0 +1,13 @@
+import HomePage from './pages/HomePage';
+import NotFoundPage from './pages/NotFoundPage';
+
+export const routes = [
+	{
+		path: '/',
+		element: <HomePage />,
+	},
+	{
+		path: '*',
+		element: <NotFoundPage />,
+	},
+];