test: ✅ allow router api to be used within tests (#115)

package.json

@@ -25,7 +25,7 @@
   },
   "prettier": "@jimmy.codes/prettier-config",
   "dependencies": {
-    "@tanstack/react-query": "5.59.9",
+    "@tanstack/react-query": "5.59.11",
     "@tanstack/react-router": "1.64.0",
     "clsx": "2.1.1",
     "react": "18.3.1",
@@ -47,7 +47,7 @@
     "@storybook/react": "8.3.5",
     "@storybook/react-vite": "8.3.5",
     "@tailwindcss/typography": "0.5.15",
-    "@tanstack/react-query-devtools": "5.59.9",
+    "@tanstack/react-query-devtools": "5.59.11",
     "@tanstack/router-devtools": "1.64.0",
     "@tanstack/router-vite-plugin": "1.64.0",
     "@testing-library/dom": "10.4.0",
@@ -57,7 +57,7 @@
     "@total-typescript/ts-reset": "0.6.1",
     "@types/bun": "1.1.11",
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react-swc": "3.7.1",
     "@vitest/coverage-v8": "2.1.2",
     "@vitest/ui": "2.1.2",

src/components/ext-link.spec.tsx

@@ -12,7 +12,7 @@ describe("ExtLink", () => {
     "Deploy",
     "Bun",
   ] as const)("should render %s link", async (to) => {
-    render(<ExtLink to={to}>{to}</ExtLink>);
+    await render(<ExtLink to={to}>{to}</ExtLink>);
 
     await expect(
       screen.findByRole("link", { name: to }),

src/pages/home.spec.tsx

@@ -4,7 +4,7 @@ import { Home } from "./home";
 
 describe("<Home />", () => {
   it('should render "React Starter" heading', async () => {
-    render(<Home />);
+    await render(<Home />);
 
     await expect(
       screen.findByRole("heading", { name: "React Starter", level: 1 }),

src/testing/setup.ts

@@ -3,7 +3,7 @@ import "@testing-library/jest-dom";
 import { server } from "./mocks/server";
 
 beforeAll(() => {
-  server.listen({ onUnhandledRequest: "warn" });
+  server.listen({ onUnhandledRequest: "error" });
 });
 
 afterEach(() => {

src/testing/utils.tsx

@@ -4,15 +4,16 @@ import {
   createRootRoute,
   createRoute,
   createRouter,
-  Outlet,
   RouterProvider,
 } from "@tanstack/react-router";
 import type { RenderOptions } from "@testing-library/react";
-import { cleanup, render } from "@testing-library/react";
+import { act, cleanup, render } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import { type ReactElement, type ReactNode, useMemo } from "react";
+import type { ReactElement, ReactNode } from "react";
 import { afterEach } from "vitest";
 
+import type { FileRoutesById } from "@/route-tree.gen";
+
 afterEach(() => {
   cleanup();
 });
@@ -26,25 +27,31 @@ const queryClient = new QueryClient({
 });
 
 // eslint-disable-next-line react-refresh/only-export-components
-const Wrapper = ({ children }: { children: ReactNode }) => {
-  const router = useMemo(() => {
-    const rootRoute = createRootRoute({ component: Outlet });
-    const testingRoute = createRoute({
-      getParentRoute: () => {
-        return rootRoute;
-      },
-      path: "/",
-      component: () => {
-        return children;
-      },
-    });
-    const routeTree = rootRoute.addChildren([testingRoute]);
-
-    return createRouter({
-      routeTree,
-      history: createMemoryHistory({ initialEntries: ["/"] }),
-    });
-  }, [children]);
+const Wrapper = ({
+  children,
+  path,
+}: {
+  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 },
+  });
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -54,16 +61,26 @@ const Wrapper = ({ children }: { children: ReactNode }) => {
   );
 };
 
-const customRender = (
+const customRender = async (
   ui: ReactElement,
-  options: Omit<RenderOptions, "wrapper"> = {},
+  {
+    path = "/",
+    ...options
+  }: Omit<RenderOptions, "wrapper"> & { path?: keyof FileRoutesById } = {},
 ) => {
+  // eslint-disable-next-line @typescript-eslint/require-await
+  const result = await act(async () => {
+    return render(ui, {
+      wrapper: ({ children }) => {
+        return <Wrapper path={path}>{children}</Wrapper>;
+      },
+      ...options,
+    });
+  });
+
   return {
     user: userEvent.setup(),
-    ...render(ui, {
-      wrapper: Wrapper,
-      ...options,
-    }),
+    ...result,
   };
 };