test(packages/tuono-router): refine unit tests (#478)

packages/tuono-router/package.json

@@ -51,7 +51,6 @@
   },
   "devDependencies": {
     "@tanstack/config": "0.7.13",
-    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@types/react": "19.0.8",
     "@vitejs/plugin-react-swc": "3.7.2",

packages/tuono-router/src/components/RouteMatch.spec.tsx

@@ -1,60 +1,84 @@
-import type * as React from 'react'
+import type { JSX } from 'react'
 import { afterEach, describe, expect, test, vi } from 'vitest'
 
 import { cleanup, render, screen } from '@testing-library/react'
 
-import type { Route } from '../route'
+import { Route } from '../route'
+import type { RouteComponent, RouteProps } from '../types'
 
 import { RouteMatch } from './RouteMatch'
 
-import '@testing-library/jest-dom'
-
-interface Props {
-  children: React.ReactNode
+function createRouteComponent(
+  routeType: string,
+  RouteComponentFn: (props: RouteProps) => JSX.Element,
+): RouteComponent {
+  const RootComponent = RouteComponentFn as RouteComponent
+  RootComponent.preload = vi.fn()
+  RootComponent.displayName = routeType
+  return RootComponent
 }
 
-const root = {
+const root = new Route({
   isRoot: true,
-  component: ({ children }: Props) => (
+  component: createRouteComponent('root', ({ children }) => (
     <div data-testid="root">root route {children}</div>
-  ),
-} as unknown as Route
+  )),
+})
 
-const parent = {
-  component: ({ children }: Props) => (
+const parent = new Route({
+  component: createRouteComponent('parent', ({ children }) => (
     <div data-testid="parent">parent route {children}</div>
-  ),
-  options: {
-    getParentRoute: () => root,
-  },
-} as unknown as Route
+  )),
+  getParentRoute: (): Route => root,
+})
 
-const route = {
-  component: () => <p data-testid="route">current route</p>,
-  options: {
-    getParentRoute: () => parent,
+const route = new Route({
+  component: createRouteComponent('route', () => (
+    <p data-testid="route">current route</p>
+  )),
+  getParentRoute: (): Route => parent,
+})
+
+vi.mock('../hooks/useServerPayloadData.ts', () => ({
+  useServerPayloadData: (): { data: unknown; isLoading: boolean } => {
+    return {
+      data: undefined,
+      isLoading: false,
+    }
   },
-} as unknown as Route
+}))
 
 describe('Test RouteMatch component', () => {
-  afterEach(() => {
-    cleanup()
-  })
+  afterEach(cleanup)
 
   test('It should correctly render nested routes', () => {
-    vi.mock('../hooks/useServerPayloadData.ts', () => ({
-      useServerPayloadData: (): { data: unknown; isLoading: boolean } => {
-        return {
-          data: undefined,
-          isLoading: false,
-        }
-      },
-    }))
-
     render(<RouteMatch route={route} serverInitialData={{}} />)
-    expect(screen.getByTestId('root')).toHaveTextContent(
-      'root route parent route current route',
+
+    expect(screen.getByTestId('root')).toMatchInlineSnapshot(
+      `
+      <div
+        data-testid="root"
+      >
+        root route 
+        <div
+          data-testid="parent"
+        >
+          parent route 
+          <p
+            data-testid="route"
+          >
+            current route
+          </p>
+        </div>
+      </div>
+    `,
     )
-    expect(screen.getByTestId('route')).toHaveTextContent('current route')
+    expect(screen.getByTestId('route')).toMatchInlineSnapshot(`
+      <p
+        data-testid="route"
+      >
+        current route
+      </p>
+    `)
   })
 })

packages/tuono-router/src/hooks/useRoute.spec.ts

@@ -3,29 +3,38 @@ import { cleanup } from '@testing-library/react'
 
 import { useRoute } from './useRoute'
 
+const { useRouterContextMock } = vi.hoisted(() => ({
+  useRouterContextMock: vi.fn<
+    () => {
+      router: { routesById: Record<string, { id: string }> }
+    }
+  >(),
+}))
+
+vi.mock('../components/RouterContext.tsx', () => ({
+  useRouterContext: useRouterContextMock,
+}))
+
 describe('useRoute', () => {
-  afterEach(cleanup)
+  afterEach(() => {
+    cleanup()
+    useRouterContextMock.mockReset()
+  })
 
   test('match routes by ids', () => {
-    vi.mock('../components/RouterContext.tsx', () => ({
-      useRouterContext: (): {
-        router: { routesById: Record<string, { id: string }> }
-      } => {
-        return {
-          router: {
-            routesById: {
-              '/': { id: '/' },
-              '/about': { id: '/about' },
-              '/posts': { id: '/posts' }, // posts/index
-              '/posts/[post]': { id: '/posts/[post]' },
-              '/posts/defined-post': { id: '/posts/defined-post' },
-              '/posts/[post]/[comment]': { id: '/posts/[post]/[comment]' },
-              '/blog/[...catch_all]': { id: '/blog/[...catch_all]' },
-            },
-          },
-        }
+    useRouterContextMock.mockReturnValue({
+      router: {
+        routesById: {
+          '/': { id: '/' },
+          '/about': { id: '/about' },
+          '/posts': { id: '/posts' }, // posts/index
+          '/posts/[post]': { id: '/posts/[post]' },
+          '/posts/defined-post': { id: '/posts/defined-post' },
+          '/posts/[post]/[comment]': { id: '/posts/[post]/[comment]' },
+          '/blog/[...catch_all]': { id: '/blog/[...catch_all]' },
+        },
       },
-    }))
+    })
 
     expect(useRoute('/')?.id).toBe('/')
     expect(useRoute('/not-found')?.id).toBe(undefined)

pnpm-lock.yaml

@@ -289,9 +289,6 @@ importers:
       '@tanstack/config':
         specifier: 0.7.13
         version: 0.7.13(@types/node@22.12.0)(esbuild@0.21.5)(rollup@4.31.0)(typescript@5.7.3)(vite@5.4.12(@types/node@22.12.0)(lightningcss@1.29.1)(sugarss@4.0.1(postcss@8.5.1)))
-      '@testing-library/jest-dom':
-        specifier: 6.6.3
-        version: 6.6.3
       '@testing-library/react':
         specifier: 16.1.0
         version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -316,9 +313,6 @@ importers:
 
 packages:
 
-  '@adobe/css-tools@4.4.0':
-    resolution: {integrity: sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==}
-
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -1022,10 +1016,6 @@ packages:
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
 
-  '@testing-library/jest-dom@6.6.3':
-    resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
-    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
-
   '@testing-library/react@16.1.0':
     resolution: {integrity: sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg==}
     engines: {node: '>=18'}
@@ -1265,10 +1255,6 @@ packages:
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
-  aria-query@5.3.2:
-    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
-    engines: {node: '>= 0.4'}
-
   array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
@@ -1382,10 +1368,6 @@ packages:
     resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==}
     engines: {node: '>=12'}
 
-  chalk@3.0.0:
-    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
-    engines: {node: '>=8'}
-
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1463,9 +1445,6 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  css.escape@1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1553,9 +1532,6 @@ packages:
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
-  dom-accessibility-api@0.6.3:
-    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
-
   dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
@@ -1988,10 +1964,6 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
-
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
@@ -2527,10 +2499,6 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
-  min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
-
   minimatch@3.0.8:
     resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
 
@@ -2836,10 +2804,6 @@ packages:
   recma-stringify@1.0.0:
     resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
 
-  redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
-
   reflect.getprototypeof@1.0.9:
     resolution: {integrity: sha512-r0Ay04Snci87djAsI4U+WNRcSw5S4pOH7qFjd/veA5gC7TbqESR3tcj28ia95L/fYUDw11JKP7uqUKUAfVvV5Q==}
     engines: {node: '>= 0.4'}
@@ -3047,10 +3011,6 @@ packages:
     resolution: {integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==}
     engines: {node: '>=0.10.0'}
 
-  strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
-
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -3512,8 +3472,6 @@ packages:
 
 snapshots:
 
-  '@adobe/css-tools@4.4.0': {}
-
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -4204,16 +4162,6 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.6.3':
-    dependencies:
-      '@adobe/css-tools': 4.4.0
-      aria-query: 5.3.2
-      chalk: 3.0.0
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
-      redent: 3.0.0
-
   '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -4511,8 +4459,6 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  aria-query@5.3.2: {}
-
   array-buffer-byte-length@1.0.2:
     dependencies:
       call-bound: 1.0.3
@@ -4652,11 +4598,6 @@ snapshots:
       loupe: 3.1.2
       pathval: 2.0.0
 
-  chalk@3.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -4725,8 +4666,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  css.escape@1.5.1: {}
-
   cssesc@3.0.0: {}
 
   csstype@3.1.3: {}
@@ -4803,8 +4742,6 @@ snapshots:
 
   dom-accessibility-api@0.5.16: {}
 
-  dom-accessibility-api@0.6.3: {}
-
   dot-prop@5.3.0:
     dependencies:
       is-obj: 2.0.0
@@ -5431,8 +5368,6 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
-  indent-string@4.0.0: {}
-
   ini@1.3.8: {}
 
   inline-style-parser@0.1.1: {}
@@ -6201,8 +6136,6 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
-  min-indent@1.0.1: {}
-
   minimatch@3.0.8:
     dependencies:
       brace-expansion: 1.1.11
@@ -6510,11 +6443,6 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
-  redent@3.0.0:
-    dependencies:
-      indent-string: 4.0.0
-      strip-indent: 3.0.0
-
   reflect.getprototypeof@1.0.9:
     dependencies:
       call-bind: 1.0.8
@@ -6812,10 +6740,6 @@ snapshots:
 
   strip-eof@1.0.0: {}
 
-  strip-indent@3.0.0:
-    dependencies:
-      min-indent: 1.0.1
-
   strip-json-comments@3.1.1: {}
 
   style-to-object@0.4.4: