diff --git a/src/App.tsx b/src/App.tsx
index 82e270e..22bde09 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,8 @@
import { Toaster } from 'react-hot-toast';
import { createBrowserRouter, RouterProvider } from 'react-router';
-import LandingPage from './pages/LandingPage';
-import NotFoundPage from './pages/NotFoundPage';
+import { routes } from './routes';
-const router = createBrowserRouter([
- {
- path: '/',
- element: ,
- },
- {
- path: '*',
- element: ,
- },
-]);
+const router = createBrowserRouter(routes);
function App() {
return (
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index 3cbce28..bfc897e 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -25,7 +25,7 @@ function NotFoundPage() {
Access Layer
- This marketplace path is not live yet.
+ This marketplace path was not found.
The creator key route you opened does not exist. Return to the
diff --git a/src/pages/__tests__/NotFoundPage.test.tsx b/src/pages/__tests__/NotFoundPage.test.tsx
index 7749e68..b34e1eb 100644
--- a/src/pages/__tests__/NotFoundPage.test.tsx
+++ b/src/pages/__tests__/NotFoundPage.test.tsx
@@ -1,21 +1,37 @@
import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
-import { describe, expect, it } from 'vitest';
+import { createMemoryRouter, MemoryRouter, RouterProvider } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
import NotFoundPage from '@/pages/NotFoundPage';
+import { routes } from '@/routes';
-describe('NotFoundPage', () => {
- it('points unknown routes back to the marketplace home', () => {
- render(
-
-
-
- );
+vi.mock('@/pages/LandingPage', () => ({
+ default: () => Marketplace home,
+}));
+
+const UNKNOWN_ROUTE = '/creator/this-route-does-not-exist';
+
+describe('NotFoundPage routing integration', () => {
+ it('renders NotFoundPage when the app navigates to an unknown route', () => {
+ const router = createMemoryRouter(routes, {
+ initialEntries: [UNKNOWN_ROUTE],
+ });
+
+ render();
expect(
screen.getByRole('heading', {
- name: /this marketplace path is not live yet/i,
+ name: /not found/i,
})
).toBeInTheDocument();
+ expect(screen.getByText(/route not found/i)).toBeInTheDocument();
+ });
+
+ it('provides link back to marketplace home', () => {
+ render(
+
+
+
+ );
expect(
screen.getByRole('link', { name: /back to marketplace/i })
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 0000000..7cc9370
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,14 @@
+import type { RouteObject } from 'react-router';
+import LandingPage from './pages/LandingPage';
+import NotFoundPage from './pages/NotFoundPage';
+
+export const routes: RouteObject[] = [
+ {
+ path: '/',
+ element: ,
+ },
+ {
+ path: '*',
+ element: ,
+ },
+];