test: ✅ allow initial entries to be provided

package.json

@@ -25,20 +25,20 @@
   },
   "prettier": "@jimmy.codes/prettier-config",
   "dependencies": {
-    "@tanstack/react-query": "5.59.11",
-    "@tanstack/react-router": "1.64.0",
+    "@tanstack/react-query": "5.59.15",
+    "@tanstack/react-router": "1.70.0",
     "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tailwind-merge": "2.5.3"
+    "tailwind-merge": "2.5.4"
   },
   "devDependencies": {
     "@iconify-json/logos": "1.2.3",
-    "@iconify-json/lucide": "1.2.8",
+    "@iconify-json/lucide": "1.2.10",
     "@iconify/tailwind": "1.1.3",
     "@jimmy.codes/eslint-config": "1.9.0",
     "@jimmy.codes/prettier-config": "1.1.0",
-    "@playwright/test": "1.48.0",
+    "@playwright/test": "1.48.1",
     "@storybook/addon-a11y": "8.3.5",
     "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-interactions": "8.3.5",
@@ -47,20 +47,20 @@
     "@storybook/react": "8.3.5",
     "@storybook/react-vite": "8.3.5",
     "@tailwindcss/typography": "0.5.15",
-    "@tanstack/react-query-devtools": "5.59.11",
-    "@tanstack/router-devtools": "1.64.0",
-    "@tanstack/router-vite-plugin": "1.64.0",
+    "@tanstack/react-query-devtools": "5.59.15",
+    "@tanstack/router-devtools": "1.70.0",
+    "@tanstack/router-vite-plugin": "1.69.1",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.1",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/bun": "1.1.11",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react-swc": "3.7.1",
-    "@vitest/coverage-v8": "2.1.2",
-    "@vitest/ui": "2.1.2",
+    "@vitest/coverage-v8": "2.1.3",
+    "@vitest/ui": "2.1.3",
     "autoprefixer": "10.4.20",
     "daisyui": "4.12.13",
     "eslint": "8.57.0",
@@ -70,16 +70,16 @@
     "is-ci": "3.0.1",
     "knip": "5.33.3",
     "lefthook": "1.7.18",
-    "msw": "2.4.10",
+    "msw": "2.4.11",
     "postcss": "8.4.47",
     "prettier": "3.3.3",
     "storybook": "8.3.5",
-    "tailwindcss": "3.4.13",
+    "tailwindcss": "3.4.14",
     "turbo": "2.1.3",
     "typescript": "5.4.5",
-    "vite": "5.4.8",
+    "vite": "5.4.9",
     "vite-tsconfig-paths": "5.0.1",
-    "vitest": "2.1.2"
+    "vitest": "2.1.3"
   },
   "packageManager": "[email protected]"
 }

src/testing/utils.tsx

@@ -9,7 +9,7 @@ import {
 import type { RenderOptions } from "@testing-library/react";
 import { act, cleanup, render } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import type { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode, useMemo } from "react";
 import { afterEach } from "vitest";
 
 import type { FileRoutesById } from "@/route-tree.gen";
@@ -18,40 +18,43 @@ afterEach(() => {
   cleanup();
 });
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
-
-// eslint-disable-next-line react-refresh/only-export-components
-const Wrapper = ({
-  children,
-  path,
-}: {
+interface WrapperProps {
   children: ReactNode;
   path: keyof FileRoutesById;
-}) => {
-  const rootRoute = createRootRoute();
-  const testingRoute = createRoute({
-    getParentRoute: () => {
-      return rootRoute;
-    },
-    path,
-    component: () => {
-      return children;
-    },
-  });
-  const routeTree = rootRoute.addChildren([testingRoute]);
-  const router = createRouter({
-    routeTree,
-    history: createMemoryHistory({
-      initialEntries: [path],
-    }),
-    context: { queryClient },
-  });
+  initialEntries: string[];
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+const Wrapper = ({ children, path, initialEntries }: WrapperProps) => {
+  const { queryClient, router } = useMemo(() => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    const rootRoute = createRootRoute();
+    const testingRoute = createRoute({
+      getParentRoute: () => {
+        return rootRoute;
+      },
+      path,
+      component: () => {
+        return children;
+      },
+    });
+
+    return {
+      queryClient,
+      router: createRouter({
+        routeTree: rootRoute.addChildren([testingRoute]),
+        history: createMemoryHistory({ initialEntries }),
+        context: { queryClient },
+      }),
+    };
+  }, [children, initialEntries, path]);
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -65,14 +68,19 @@ const customRender = async (
   ui: ReactElement,
   {
     path = "/",
+    initialEntries = [path],
     ...options
-  }: Omit<RenderOptions, "wrapper"> & { path?: keyof FileRoutesById } = {},
+  }: Omit<RenderOptions, "wrapper"> & Partial<WrapperProps> = {},
 ) => {
   // eslint-disable-next-line @typescript-eslint/require-await
   const result = await act(async () => {
     return render(ui, {
       wrapper: ({ children }) => {
-        return <Wrapper path={path}>{children}</Wrapper>;
+        return (
+          <Wrapper path={path} initialEntries={initialEntries}>
+            {children}
+          </Wrapper>
+        );
       },
       ...options,
     });