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";
|
||||
|
||||
import { useRouter as useCompatRouter } from "next/compat/router";
|
||||
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.
|
||||
*/
|
||||
export function useParamsWithFallback() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
return params || router.query;
|
||||
export function useParamsWithFallback(): Params | ParsedUrlQuery {
|
||||
const params = useParams(); // always `null` in pages router
|
||||
const router = useCompatRouter(); // always `null` in app router
|
||||
return params ?? router?.query ?? {};
|
||||
}
|
||||
|
|
|
@ -36,7 +36,7 @@ const workspaces = packagedEmbedTestsOnly
|
|||
test: {
|
||||
include: ["packages/**/*.{test,spec}.{ts,js}", "apps/**/*.{test,spec}.{ts,js}"],
|
||||
// TODO: Ignore the api until tests are fixed
|
||||
exclude: ["**/node_modules/**/*", "packages/embeds/**/*"],
|
||||
exclude: ["**/node_modules/**/*", "packages/embeds/**/*", "packages/lib/hooks/**/*"],
|
||||
setupFiles: ["setupVitest.ts"],
|
||||
},
|
||||
},
|
||||
|
@ -67,6 +67,13 @@ const workspaces = packagedEmbedTestsOnly
|
|||
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);
|
||||
|
|
Loading…
Reference in New Issue
Block a user