test(react-router): add test verify notFoundRouteProps properly passes data

Signed-off-by: leesb971204 <[email protected]>

Author: leesb971204

packages/react-router/tests/not-found.test.tsx

@@ -1,5 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
 import { afterEach, beforeEach, expect, test } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
 
 import {
   Link,
@@ -9,8 +13,9 @@ import {
   createRootRoute,
   createRoute,
   createRouter,
+  notFound,
 } from '../src'
-import type { RouterHistory } from '../src'
+import type { NotFoundRouteProps, RouterHistory } from '../src'
 
 let history: RouterHistory
 
@@ -123,3 +128,118 @@ test.each([
     expect(notFoundComponent).toBeInTheDocument()
   },
 )
+
+test('defaultNotFoundComponent and notFoundComponent receives data props via spread operator', async () => {
+  const customData = {
+    message: 'Custom not found message',
+  }
+
+  const DefaultNotFoundComponentWithProps = (props: NotFoundRouteProps) => (
+    <div data-testid="default-not-found-with-props">
+      <span data-testid="message">{props.data.message}</span>
+    </div>
+  )
+
+  const NotFoundComponentWithProps = (props: NotFoundRouteProps) => (
+    <div data-testid="not-found-with-props">
+      <span data-testid="message">{props.data.message}</span>
+    </div>
+  )
+
+  const rootRoute = createRootRoute({
+    component: () => (
+      <div data-testid="root-component">
+        <h1>Root Component</h1>
+        <div>
+          <Link
+            data-testid="default-not-found-route-link"
+            to="/default-not-found-route"
+          >
+            link to default not found route
+          </Link>
+          <Link data-testid="not-found-route-link" to="/not-found-route">
+            link to not found route
+          </Link>
+        </div>
+        <Outlet />
+      </div>
+    ),
+  })
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => (
+      <div data-testid="index-component">
+        <h2>Index Page</h2>
+      </div>
+    ),
+  })
+
+  const defaultNotFoundRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/default-not-found-route',
+    loader: () => {
+      throw notFound({ data: customData })
+    },
+    component: () => (
+      <div data-testid="default-not-found-route-component">
+        Should not render
+      </div>
+    ),
+  })
+
+  const notFoundRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/not-found-route',
+    loader: () => {
+      throw notFound({ data: customData })
+    },
+    component: () => (
+      <div data-testid="not-found-route-component">Should not render</div>
+    ),
+    notFoundComponent: NotFoundComponentWithProps,
+  })
+
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([
+      indexRoute,
+      defaultNotFoundRoute,
+      notFoundRoute,
+    ]),
+    history,
+    defaultNotFoundComponent: DefaultNotFoundComponentWithProps,
+  })
+
+  render(<RouterProvider router={router} />)
+  await router.load()
+  await screen.findByTestId('root-component')
+
+  const defaultNotFoundRouteLink = screen.getByTestId(
+    'default-not-found-route-link',
+  )
+  defaultNotFoundRouteLink.click()
+
+  const defaultNotFoundComponent = await screen.findByTestId(
+    'default-not-found-with-props',
+    {},
+    { timeout: 1000 },
+  )
+  expect(defaultNotFoundComponent).toBeInTheDocument()
+
+  const defaultNotFoundComponentMessage = await screen.findByTestId('message')
+  expect(defaultNotFoundComponentMessage).toHaveTextContent(customData.message)
+
+  const notFoundRouteLink = screen.getByTestId('not-found-route-link')
+  notFoundRouteLink.click()
+
+  const notFoundComponent = await screen.findByTestId(
+    'not-found-with-props',
+    {},
+    { timeout: 1000 },
+  )
+  expect(notFoundComponent).toBeInTheDocument()
+
+  const errorMessageComponent = await screen.findByTestId('message')
+  expect(errorMessageComponent).toHaveTextContent(customData.message)
+})