diff --git a/bun.lockb b/bun.lockb index 4e169c3..9929cc4 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 6733f0b..782d1b1 100644 --- a/package.json +++ b/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", diff --git a/src/components/ext-link.spec.tsx b/src/components/ext-link.spec.tsx index a232a08..fe05984 100644 --- a/src/components/ext-link.spec.tsx +++ b/src/components/ext-link.spec.tsx @@ -12,7 +12,7 @@ describe("ExtLink", () => { "Deploy", "Bun", ] as const)("should render %s link", async (to) => { - render({to}); + await render({to}); await expect( screen.findByRole("link", { name: to }), diff --git a/src/pages/home.spec.tsx b/src/pages/home.spec.tsx index ee9533f..9535c02 100644 --- a/src/pages/home.spec.tsx +++ b/src/pages/home.spec.tsx @@ -4,7 +4,7 @@ import { Home } from "./home"; describe("", () => { it('should render "React Starter" heading', async () => { - render(); + await render(); await expect( screen.findByRole("heading", { name: "React Starter", level: 1 }), diff --git a/src/testing/setup.ts b/src/testing/setup.ts index 26d67ca..1ae267e 100644 --- a/src/testing/setup.ts +++ b/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(() => { diff --git a/src/testing/utils.tsx b/src/testing/utils.tsx index 0800507..fb1a7bf 100644 --- a/src/testing/utils.tsx +++ b/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 ( @@ -54,16 +61,26 @@ const Wrapper = ({ children }: { children: ReactNode }) => { ); }; -const customRender = ( +const customRender = async ( ui: ReactElement, - options: Omit = {}, + { + path = "/", + ...options + }: Omit & { path?: keyof FileRoutesById } = {}, ) => { + // eslint-disable-next-line @typescript-eslint/require-await + const result = await act(async () => { + return render(ui, { + wrapper: ({ children }) => { + return {children}; + }, + ...options, + }); + }); + return { user: userEvent.setup(), - ...render(ui, { - wrapper: Wrapper, - ...options, - }), + ...result, }; };