Files
cloudflare__vinext/tests/pages-page-handler.test.ts
T
Nathan Nguyen 3a1e56748f fix(app-router): match Pages navigation params in hybrid builds (#1741)
* fix(app-router): emit pages client entry for hybrid builds

* fix pages router navigation params readiness

* fix(pages-router): track hashed fallback client entry

* fix(pages-router): honor navigation readiness in hooks

* fix(pages-router): derive server router.isReady from SSR readiness

Address review feedback on #1741:

- getRouterSnapshot() now reads navigationIsReady from the SSR context on
  the server instead of unconditionally returning true. For pre-ready Pages
  routes (auto-export dynamic / query-string / rewrite-capable builds) this
  keeps useRouter().isReady consistent between SSR and client hydration,
  avoiding a hydration mismatch for components that read it in JSX. Mirrors
  Next.js render.tsx's server readiness rule.
- Drop the redundant guard branch in getClientParamsSnapshot.
- Add a regression test asserting server useRouter().isReady reflects the
  SSR navigationIsReady context.

* fix(pages-router): align param resolution and dev/prod readiness parity

Address review feedback (ask-bonk + self-review) on #1741:

- Align client Pages navigation params to query-first, matching the server
  snapshot and Next.js's adaptForPathParams (derives path params from
  router.query). __NEXT_DATA__.query is kept current on client navigation, so
  the two snapshots are now provably identical and avoid a latent post-
  hydration mismatch.
- Populate window.__VINEXT_PAGE_PATTERNS__ in the dev server (own script tag)
  so the next/navigation compat hooks can resolve a dynamic pattern from a
  resolved path in dev exactly as in production. Closes a dev/prod parity gap
  (prod set this via the client entry; dev never did).
- Drop the redundant pre-readiness setSSRContext in dev; the single post-
  module-load call now publishes navigationIsReady before rendering, matching
  the prod handler.
- Document that installPagesClientAssetGlobals is intentionally inert for
  App-only builds, and that getReadonlyPagesSearchParams' string-keyed cache
  is safe to share across concurrent SSR requests (immutable wrappers).
- Add a dev regression test asserting __VINEXT_PAGE_PATTERNS__ exposure.

* fix(pages-router): prefer URL params for client snapshots

* fix(app-router): gate pages asset globals

* test(app-router): add production test for hybrid basePath + assetPrefix

* fix(navigation): widen usePathname return type to string | null

* refactor(pages-router): dedupe navigation readiness modeling and cache pattern scan

Addresses code-review cleanup findings on the Pages Router navigation
readiness work:

- Extract buildPagesReadinessNextData() so the dev SSR handler and the
  production Pages page handler derive the gssp/gsp/gip/appGip/autoExport
  __NEXT_DATA__ readiness flags from one place, instead of two hand-kept
  copies that could drift and produce a dev/prod hydration mismatch.
- Extract resolvePagesNavigationPathname() shared by the client and SSR
  branches of getPagesNavigationContext, so the pathname null-ness rule
  (fallback / pre-ready auto-export dynamic) cannot diverge between them.
- Memoize resolvePagesRoutePatternForPath()'s pattern scan, which ran an
  uncached O(routes) loop on every useSyncExternalStore snapshot read.
- In getServerSearchParamsSnapshot, serialize the source only when the
  object-identity fast path misses, avoiding a toString() on every read.

* refactor(pages-router): consistent ISR readiness data + robustness cleanups

Addresses further code-review findings:

- Thread the readiness flags (gssp/gsp/gip/appGip/autoExport) through the ISR
  background-regeneration path: renderPagesIsrHtml now serializes the same
  __NEXT_DATA__ readiness state the initial render emits, so a regenerated,
  re-cached page hydrates with the identical initial router.isReady the server
  computed. Previously these flags were dropped on that path — benign today
  (ISR-eligible getStaticProps routes never trigger the flag-gated early-ready
  branches) but a latent dev/prod hydration-readiness drift. Adds a shared
  PagesNextDataExtras type so every render path stays in lockstep.
- readSsrManifest: degrade a malformed/unparseable SSR manifest to "no SSR
  manifest" with a warning instead of throwing and aborting server startup,
  restoring the previous tolerant behavior.
- pages-readiness: project PagesReadinessNextData from the canonical
  VinextNextData and accept PagesPageModule, instead of bespoke types that
  could drift from the __NEXT_DATA__ shape.
- getReadonlyPagesSearchParams: drop the redundant string-keyed cache slot; the
  per-object WeakMap is authoritative and concurrency-safe on its own.
- isPagesRouterReady: drop the redundant server-side window check.

* fix(pages-router): restore string-keyed readonly search-params cache

Reverts the cache simplification from the previous commit. The string-keyed
slot is load-bearing, not redundant: across the Pages Router pre-ready → ready
transition the navigation context swaps in a new URLSearchParams instance even
when the query string is unchanged, so the per-object WeakMap alone returns a
fresh ReadonlyURLSearchParams wrapper and useSearchParams() loses Object.is
stability — re-firing a [searchParams] effect. Caught by the rewrite-driven
pre-ready static page e2e (search-params-snapshots saw ['',''] not ['']).
Keeps the improved comment explaining why both cache levels are needed.

---------

Co-authored-by: James <james@eli.cx>
2026-06-09 11:30:38 +01:00

400 lines
15 KiB
TypeScript

/**
* Unit tests for the Pages Router render orchestrator.
*
* Tests the behavior of `createPagesPageHandler` through stub closures,
* verifying route matching, 404/500 fallback, _next/data envelope,
* i18n redirect, 405 method check, and internal-error guard.
*/
import { describe, it, expect, vi } from "vite-plus/test";
import { createPagesPageHandler } from "../packages/vinext/src/server/pages-page-handler.js";
import type { CreatePagesPageHandlerOptions } from "../packages/vinext/src/server/pages-page-handler.js";
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function makeRequest(pathname = "/", method = "GET"): Request {
return new Request(`http://localhost${pathname}`, { method });
}
function makePageModule(overrides: Record<string, unknown> = {}): Record<string, unknown> {
return { default: () => null, ...overrides };
}
type PageRoute = {
pattern: string;
patternParts: string[];
isDynamic: boolean;
params: string[];
module: Record<string, unknown>;
filePath: string;
};
function makeRoute(pattern: string, module: Record<string, unknown> = makePageModule()): PageRoute {
return {
pattern,
patternParts: pattern === "/" ? [] : pattern.split("/").filter(Boolean),
isDynamic: pattern.includes(":"),
params: [],
module,
filePath: `/project/pages${pattern === "/" ? "/index" : pattern}.tsx`,
};
}
// Default stubs — most tests override only the pieces they care about.
function makeOpts(
overrides: Partial<CreatePagesPageHandlerOptions> = {},
): CreatePagesPageHandlerOptions {
const pageRoutes: PageRoute[] = overrides.pageRoutes ?? [makeRoute("/")];
return {
pageRoutes,
errorPageRoute: null,
matchRoute: (url, routes) => {
const p = url.split("?")[0];
const route = routes.find((r) => r.pattern === p || r.pattern === p.replace(/\/$/, ""));
return route ? { route, params: {} } : null;
},
i18nConfig: null,
vinextConfig: {
basePath: "",
trailingSlash: false,
disableOptimizedLoading: true,
},
buildId: "test-build-id",
hasMiddleware: false,
appAssetPath: null,
hasRewrites: false,
setSSRContext: null,
getPagesNavigationIsReadyFromSerializedState: null,
setI18nContext: null,
wrapWithRouterContext: null,
resetSSRHead: undefined,
getSSRHeadHTML: undefined,
setDocumentInitialHead: undefined,
flushPreloads: undefined,
getFontLinks: () => [],
getFontStyles: () => [],
getFontPreloads: () => [],
renderToReadableStream: async (_element) => {
const encoder = new TextEncoder();
return new ReadableStream({
start(controller) {
controller.enqueue(encoder.encode("<html><body>page</body></html>"));
controller.close();
},
});
},
renderIsrPassToStringAsync: async (_element) => "<html><body>isr</body></html>",
safeJsonStringify: (v) => JSON.stringify(v),
sanitizeDestination: (d) => d,
createPageElement: (_PageComp, _AppComp, _props) => null,
enhancePageElement: (_PageComp, _AppComp, _props, _opts) => null,
AppComponent: null,
DocumentComponent: null,
...overrides,
};
}
// ---------------------------------------------------------------------------
// Route miss → 404 fallback
// ---------------------------------------------------------------------------
describe("createPagesPageHandler — route miss", () => {
it("returns default 404 when no custom 404 page and no _error page", async () => {
const handler = createPagesPageHandler(makeOpts({ pageRoutes: [] }));
const res = await handler(makeRequest("/missing"), "/missing", null, null, null);
expect(res.status).toBe(404);
const body = await res.text();
expect(body).toContain("This page could not be found");
});
it("renders custom /404 page on route miss", async () => {
const notFoundModule = makePageModule();
const routes = [makeRoute("/404", notFoundModule)];
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: routes,
matchRoute: (url, r) => {
const p = url.split("?")[0];
const route = r.find((rt) => rt.pattern === p);
return route ? { route, params: {} } : null;
},
}),
);
const res = await handler(makeRequest("/nonexistent"), "/nonexistent", null, null, null);
// Custom 404 renders successfully (200 body, 404 status via override)
expect(res.status).toBe(404);
});
it("returns _next/data 404 JSON on data request route miss", async () => {
const handler = createPagesPageHandler(makeOpts({ pageRoutes: [] }));
const res = await handler(makeRequest("/missing"), "/missing", null, null, { isDataReq: true });
expect(res.status).toBe(404);
const ct = res.headers.get("content-type");
expect(ct).toContain("application/json");
});
});
// ---------------------------------------------------------------------------
// Page has no default export
// ---------------------------------------------------------------------------
describe("createPagesPageHandler — no default export", () => {
it("returns 500 when page module has no default export", async () => {
const routes = [makeRoute("/", {})]; // no `default`
const handler = createPagesPageHandler(makeOpts({ pageRoutes: routes }));
const res = await handler(makeRequest("/"), "/", null, null, null);
expect(res.status).toBe(500);
});
});
// ---------------------------------------------------------------------------
// _next/data JSON envelope
// ---------------------------------------------------------------------------
describe("createPagesPageHandler — _next/data", () => {
it("detects /_next/data URL and returns JSON envelope", async () => {
const routes = [makeRoute("/about")];
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: routes,
matchRoute: (url, r) => {
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
return route ? { route, params: {} } : null;
},
}),
);
const dataUrl = "/_next/data/test-build-id/about.json";
const res = await handler(makeRequest(dataUrl), dataUrl, null, null, null);
expect(res.status).toBe(200);
const ct = res.headers.get("content-type");
expect(ct).toContain("application/json");
const body = (await res.json()) as Record<string, unknown>;
expect(body).toHaveProperty("pageProps");
});
it("returns 404 JSON for _next/data with wrong buildId", async () => {
const handler = createPagesPageHandler(makeOpts());
const badUrl = "/_next/data/wrong-build-id/about.json";
const res = await handler(makeRequest(badUrl), badUrl, null, null, null);
expect(res.status).toBe(404);
const ct = res.headers.get("content-type");
expect(ct).toContain("application/json");
});
});
// ---------------------------------------------------------------------------
// 405 method check
// ---------------------------------------------------------------------------
describe("createPagesPageHandler — 405 method check", () => {
it("returns 405 for POST to a static page (no getServerSideProps)", async () => {
const routes = [makeRoute("/about", makePageModule())];
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: routes,
matchRoute: (url, r) => {
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
return route ? { route, params: {} } : null;
},
}),
);
const res = await handler(makeRequest("/about", "POST"), "/about", null, null, null);
expect(res.status).toBe(405);
const allow = res.headers.get("Allow");
expect(allow).toContain("GET");
});
it("skips 405 check when page exports getServerSideProps", async () => {
// The 405 guard only applies to static (no-gSSP) pages. When gSSP is
// present, resolvePagesPageMethodResponse returns null and the render
// pipeline proceeds. Verify by spying on the module method check result.
// We use a module that returns { props: {} } from gSSP so the render
// can complete without hitting renderToReadableStream errors.
const gsspModule = makePageModule({
getServerSideProps: async () => ({ props: {} }),
});
const routes = [makeRoute("/about", gsspModule)];
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: routes,
matchRoute: (url, r) => {
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
return route ? { route, params: {} } : null;
},
}),
);
const res = await handler(makeRequest("/about", "POST"), "/about", null, null, null);
// Must not be 405 — the method check is bypassed for gSSP pages
expect(res.status).not.toBe(405);
// Must not be 405 Allow header either
expect(res.headers.get("Allow")).toBeNull();
});
it("does not 405 on /404 pattern (error pages are exempt)", async () => {
const routes = [makeRoute("/404", makePageModule())];
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: routes,
matchRoute: (url, r) => {
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
return route ? { route, params: {} } : null;
},
}),
);
const res = await handler(makeRequest("/404", "POST"), "/404", null, null, null);
expect(res.status).not.toBe(405);
});
});
// ---------------------------------------------------------------------------
// i18n redirect — 307 short-circuit from resolvePagesI18nRequest
// ---------------------------------------------------------------------------
describe("createPagesPageHandler — i18n redirect", () => {
// getLocaleRedirect fires when pathname === "/" and the Accept-Language
// header prefers a non-default locale. The handler must return a 307
// before attempting any route match.
it("returns 307 when i18n locale detection produces a redirect", async () => {
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: [makeRoute("/")],
i18nConfig: {
locales: ["en", "fr"],
defaultLocale: "en",
},
}),
);
// Visit / with Accept-Language: fr — resolvePagesI18nRequest redirects to /fr
const req = new Request("http://localhost/", {
headers: { "accept-language": "fr" },
});
const res = await handler(req, "/", null, null, null);
expect(res.status).toBe(307);
expect(res.headers.get("location")).toContain("/fr");
});
it("does not redirect when locale prefix is already present", async () => {
const routes = [makeRoute("/fr/about")];
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: routes,
i18nConfig: {
locales: ["en", "fr"],
defaultLocale: "en",
},
matchRoute: (url, r) => {
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
return route ? { route, params: {} } : null;
},
}),
);
const res = await handler(makeRequest("/fr/about"), "/fr/about", null, null, null);
// Not a 307 — the locale prefix is already present
expect(res.status).not.toBe(307);
});
});
// ---------------------------------------------------------------------------
// Internal error guard (prevents infinite recursion on error pages)
// ---------------------------------------------------------------------------
describe("createPagesPageHandler — internal error guard", () => {
it("returns 500 text when __isInternalErrorRender is set and render throws", async () => {
const errorRoute = makeRoute("/_error", makePageModule());
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: [errorRoute],
errorPageRoute: errorRoute,
matchRoute: (url, r) => {
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
return route ? { route, params: {} } : null;
},
// Cause an error during render
renderToReadableStream: async () => {
throw new Error("render failure");
},
}),
);
const res = await handler(makeRequest("/_error"), "/_error", null, null, {
__isInternalErrorRender: true,
__forcedRoute: errorRoute,
});
expect(res.status).toBe(500);
const body = await res.text();
expect(body).toBe("Internal Server Error");
});
it("falls back to 500 text on data request even without __isInternalErrorRender", async () => {
// Data requests skip renderToReadableStream (JSON envelope path), so we
// need to throw earlier — in createPageElement, which is called inside
// resolvePagesPageData to build the element for ISR/SSR rendering.
const routes = [
makeRoute("/about", {
...makePageModule(),
getStaticProps: async () => {
throw new Error("gssp failure");
},
}),
];
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: routes,
matchRoute: (url, r) => {
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
return route ? { route, params: {} } : null;
},
// getFontPreloads is called before the isDataReq branch.
// Throwing here triggers the catch block regardless of isDataReq.
getFontPreloads: () => {
throw new Error("font failure");
},
}),
);
// isDataReq=true → no error-page recursion, direct 500
const res = await handler(makeRequest("/about"), "/about", null, null, { isDataReq: true });
expect(res.status).toBe(500);
});
});
// ---------------------------------------------------------------------------
// renderErrorPageOnMiss: false — no 404 recursion
// ---------------------------------------------------------------------------
describe("createPagesPageHandler — renderErrorPageOnMiss: false", () => {
it("returns default 404 without recursing when renderErrorPageOnMiss=false", async () => {
const handler = createPagesPageHandler(makeOpts({ pageRoutes: [] }));
const res = await handler(makeRequest("/missing"), "/missing", null, null, {
renderErrorPageOnMiss: false,
});
expect(res.status).toBe(404);
const body = await res.text();
expect(body).toContain("This page could not be found");
});
});
// ---------------------------------------------------------------------------
// setSSRContext called
// ---------------------------------------------------------------------------
describe("createPagesPageHandler — SSR context", () => {
it("calls setSSRContext with the matched route pattern", async () => {
const setSSRContext = vi.fn();
const routes = [makeRoute("/about")];
const handler = createPagesPageHandler(
makeOpts({
pageRoutes: routes,
setSSRContext,
matchRoute: (url, r) => {
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
return route ? { route, params: {} } : null;
},
}),
);
await handler(makeRequest("/about"), "/about", null, null, null);
expect(setSSRContext).toHaveBeenCalled();
const ctx = setSSRContext.mock.calls[0][0] as Record<string, unknown>;
expect(ctx.pathname).toBe("/about");
});
});