diff --git a/packages/tuono-router/src/components/RouteMatch.spec.tsx b/packages/tuono-router/src/components/RouteMatch.spec.tsx
index ce0e2b20..a2236f19 100644
--- a/packages/tuono-router/src/components/RouteMatch.spec.tsx
+++ b/packages/tuono-router/src/components/RouteMatch.spec.tsx
@@ -7,14 +7,11 @@ import { useServerPayloadData } from '../hooks/useServerPayloadData'
import { RouteMatch } from './RouteMatch'
-function createRouteComponent(
- routeType: string,
- includeChildren: boolean,
-): RouteComponent {
+function createRouteComponent(routeType: string): RouteComponent {
const RootComponent = (({ children }: RouteProps) => (
{`${routeType} route`}
- {includeChildren ? children : null}
+ {children}
)) as RouteComponent
RootComponent.preload = vi.fn()
@@ -22,33 +19,45 @@ function createRouteComponent(
return RootComponent
}
+function createLeafRouteComponent(routeType: string): RouteComponent {
+ const RootComponent = (({ data }: RouteProps) => (
+ {data ? JSON.stringify(data) : null}
+ )) as RouteComponent
+ RootComponent.preload = vi.fn()
+ RootComponent.displayName = routeType
+ return RootComponent
+}
+
const root = new Route({
isRoot: true,
- component: createRouteComponent('root', true),
+ component: createRouteComponent('root'),
})
const parent = new Route({
- component: createRouteComponent('parent', true),
+ component: createRouteComponent('parent'),
getParentRoute: (): Route => root,
})
const route = new Route({
- component: createRouteComponent('current', false),
+ component: createLeafRouteComponent('current'),
getParentRoute: (): Route => parent,
})
vi.mock('../hooks/useServerPayloadData', () => ({
useServerPayloadData: vi.fn(),
}))
-vi.mocked(useServerPayloadData).mockReturnValue({
- data: undefined,
- isLoading: false,
-})
+
+const useServerPayloadDataMock = vi.mocked(useServerPayloadData)
describe('', () => {
afterEach(cleanup)
it('should correctly render nested routes', () => {
+ useServerPayloadDataMock.mockReturnValue({
+ data: { some: 'data' },
+ isLoading: false,
+ })
+
render()
expect(screen.getByTestId('root')).toMatchInlineSnapshot(
@@ -64,11 +73,38 @@ describe('', () => {
- current route
+ {"some":"data"}
`,
)
})
+
+ it('should return null data when while loading', () => {
+ useServerPayloadDataMock.mockReturnValue({
+ data: { some: 'data' },
+ isLoading: true,
+ })
+
+ render()
+
+ expect(screen.getByTestId('root')).toMatchInlineSnapshot(
+ `
+
+ `,
+ )
+ })
})
diff --git a/packages/tuono-router/src/components/RouteMatch.tsx b/packages/tuono-router/src/components/RouteMatch.tsx
index 854cfcb3..40519c68 100644
--- a/packages/tuono-router/src/components/RouteMatch.tsx
+++ b/packages/tuono-router/src/components/RouteMatch.tsx
@@ -24,10 +24,16 @@ export const RouteMatch = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
const routes = useMemo(() => loadParentComponents(route), [route.id])
+ const routeData = isLoading ? null : data
+
return (
-
+
-
+
)