diff --git a/packages/react-router/tests/errorComponent.test.tsx b/packages/react-router/tests/errorComponent.test.tsx
index ccb9be1d4d..9110998a7d 100644
--- a/packages/react-router/tests/errorComponent.test.tsx
+++ b/packages/react-router/tests/errorComponent.test.tsx
@@ -7,6 +7,7 @@ import {
createRootRoute,
createRoute,
createRouter,
+ notFound,
} from '../src'
import type { ErrorComponentProps } from '../src'
@@ -129,3 +130,69 @@ describe.each([{ preload: false }, { preload: 'intent' }] as const)(
})
},
)
+
+describe('notFoundComponent is rendered when an error is thrown in params.parse', () => {
+ test('displays notFoundComponent when error is thrown in params.parse', async () => {
+ const rootRoute = createRootRoute({
+ component: function Root() {
+ return
Root
+ },
+ notFoundComponent: function NotFound() {
+ return Not Found
+ },
+ })
+
+ const indexRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/',
+ component: function Home() {
+ return (
+
+ link to rotten pizza
+
+ )
+ },
+ })
+
+ const pizzaRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/pizza/:pizzaType',
+ component: function Pizza() {
+ return Pizza
+ },
+ params: {
+ parse: (p) => {
+ if (p.pizzaType === 'rotten') {
+ throw new Error('404 No rotten pizzas')
+ }
+ return { pizzaType: p.pizzaType }
+ },
+ stringify: (p) => ({ pizzaType: p.pizzaType }),
+ },
+ onError: () => {
+ throw notFound()
+ },
+ })
+
+ const routeTree = rootRoute.addChildren([indexRoute, pizzaRoute])
+
+ const router = createRouter({
+ routeTree,
+ })
+
+ render()
+
+ const linkToRottenPizza = await screen.findByRole('link', {
+ name: 'link to rotten pizza',
+ })
+
+ expect(linkToRottenPizza).toBeInTheDocument()
+ fireEvent.mouseOver(linkToRottenPizza)
+ fireEvent.click(linkToRottenPizza)
+
+ const notFoundComponent = await screen.findByText('Not Found', undefined, {
+ timeout: 750,
+ })
+ expect(notFoundComponent).toBeInTheDocument()
+ })
+})