From c8cf0771d47742dfe57ed5fc9ffc92685cf80b90 Mon Sep 17 00:00:00 2001 From: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> Date: Sun, 2 Feb 2025 17:45:16 +0100 Subject: [PATCH] test(packages/tuono-router): refine unit tests (#478) --- packages/tuono-router/package.json | 1 - .../src/components/RouteMatch.spec.tsx | 98 ++++++++++++------- .../tuono-router/src/hooks/useRoute.spec.ts | 47 +++++---- pnpm-lock.yaml | 76 -------------- 4 files changed, 89 insertions(+), 133 deletions(-) diff --git a/packages/tuono-router/package.json b/packages/tuono-router/package.json index 11d773de..5850017b 100644 --- a/packages/tuono-router/package.json +++ b/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", diff --git a/packages/tuono-router/src/components/RouteMatch.spec.tsx b/packages/tuono-router/src/components/RouteMatch.spec.tsx index 640dbb8b..516a88df 100644 --- a/packages/tuono-router/src/components/RouteMatch.spec.tsx +++ b/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 }) => (
root route {children}
- ), -} as unknown as Route + )), +}) -const parent = { - component: ({ children }: Props) => ( +const parent = new Route({ + component: createRouteComponent('parent', ({ children }) => (
parent route {children}
- ), - options: { - getParentRoute: () => root, - }, -} as unknown as Route + )), + getParentRoute: (): Route => root, +}) -const route = { - component: () =>

current route

, - options: { - getParentRoute: () => parent, +const route = new Route({ + component: createRouteComponent('route', () => ( +

current route

+ )), + 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() - expect(screen.getByTestId('root')).toHaveTextContent( - 'root route parent route current route', + + expect(screen.getByTestId('root')).toMatchInlineSnapshot( + ` +
+ root route +
+ parent route +

+ current route +

+
+
+ `, ) - expect(screen.getByTestId('route')).toHaveTextContent('current route') + expect(screen.getByTestId('route')).toMatchInlineSnapshot(` +

+ current route +

+ `) }) }) diff --git a/packages/tuono-router/src/hooks/useRoute.spec.ts b/packages/tuono-router/src/hooks/useRoute.spec.ts index 2272582d..bdbf764d 100644 --- a/packages/tuono-router/src/hooks/useRoute.spec.ts +++ b/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 } + } + >(), +})) + +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 } - } => { - 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) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c29cae44..f49eef47 100644 --- a/pnpm-lock.yaml +++ b/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: