fix: [app dir bootstrapping 8] `useParamsWithFallback` hook and add tests (#12041)
* fix: first solution using RouterContext * fix: second solution by importing router from next/compat/router * fix return type
This commit is contained in:
parent
367c8a96d8
commit
13ec810cb9
|
@ -0,0 +1,63 @@
|
||||||
|
import { renderHook } from "@testing-library/react-hooks";
|
||||||
|
import { vi } from "vitest";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
import { useParamsWithFallback } from "./useParamsWithFallback";
|
||||||
|
|
||||||
|
describe("useParamsWithFallback hook", () => {
|
||||||
|
it("should return router.query when param is null", () => {
|
||||||
|
vi.mock("next/navigation", () => ({
|
||||||
|
useParams: vi.fn().mockReturnValue(null),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("next/compat/router", () => ({
|
||||||
|
useRouter: vi.fn().mockReturnValue({ query: { id: 1 } }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useParamsWithFallback());
|
||||||
|
|
||||||
|
expect(result.current).toEqual({ id: 1 });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should return router.query when param is undefined", () => {
|
||||||
|
vi.mock("next/navigation", () => ({
|
||||||
|
useParams: vi.fn().mockReturnValue(undefined),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("next/compat/router", () => ({
|
||||||
|
useRouter: vi.fn().mockReturnValue({ query: { id: 1 } }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useParamsWithFallback());
|
||||||
|
|
||||||
|
expect(result.current).toEqual({ id: 1 });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should return useParams() if it exists", () => {
|
||||||
|
vi.mock("next/navigation", () => ({
|
||||||
|
useParams: vi.fn().mockReturnValue({ id: 1 }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("next/compat/router", () => ({
|
||||||
|
useRouter: vi.fn().mockReturnValue(null),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useParamsWithFallback());
|
||||||
|
|
||||||
|
expect(result.current).toEqual({ id: 1 });
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should return useParams() if it exists", () => {
|
||||||
|
vi.mock("next/navigation", () => ({
|
||||||
|
useParams: vi.fn().mockReturnValue({ id: 1 }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("next/compat/router", () => ({
|
||||||
|
useRouter: vi.fn().mockReturnValue({ query: { id: 2 } }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useParamsWithFallback());
|
||||||
|
|
||||||
|
expect(result.current).toEqual({ id: 1 });
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,13 +1,18 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter as useCompatRouter } from "next/compat/router";
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
import { useRouter } from "next/router";
|
import type { ParsedUrlQuery } from "querystring";
|
||||||
|
|
||||||
|
interface Params {
|
||||||
|
[key: string]: string | string[];
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This hook is a workaround until pages are migrated to app directory.
|
* This hook is a workaround until pages are migrated to app directory.
|
||||||
*/
|
*/
|
||||||
export function useParamsWithFallback() {
|
export function useParamsWithFallback(): Params | ParsedUrlQuery {
|
||||||
const router = useRouter();
|
const params = useParams(); // always `null` in pages router
|
||||||
const params = useParams();
|
const router = useCompatRouter(); // always `null` in app router
|
||||||
return params || router.query;
|
return params ?? router?.query ?? {};
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,7 @@ const workspaces = packagedEmbedTestsOnly
|
||||||
test: {
|
test: {
|
||||||
include: ["packages/**/*.{test,spec}.{ts,js}", "apps/**/*.{test,spec}.{ts,js}"],
|
include: ["packages/**/*.{test,spec}.{ts,js}", "apps/**/*.{test,spec}.{ts,js}"],
|
||||||
// TODO: Ignore the api until tests are fixed
|
// TODO: Ignore the api until tests are fixed
|
||||||
exclude: ["**/node_modules/**/*", "packages/embeds/**/*"],
|
exclude: ["**/node_modules/**/*", "packages/embeds/**/*", "packages/lib/hooks/**/*"],
|
||||||
setupFiles: ["setupVitest.ts"],
|
setupFiles: ["setupVitest.ts"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -67,6 +67,13 @@ const workspaces = packagedEmbedTestsOnly
|
||||||
setupFiles: ["packages/app-store/test-setup.ts"],
|
setupFiles: ["packages/app-store/test-setup.ts"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: {
|
||||||
|
name: "@calcom/packages/lib/hooks",
|
||||||
|
include: ["packages/lib/hooks/**/*.{test,spec}.{ts,js}"],
|
||||||
|
environment: "jsdom",
|
||||||
|
},
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default defineWorkspace(workspaces);
|
export default defineWorkspace(workspaces);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user