Files
cloudflare__vinext/tests/app-router.test.ts
T
Nathan Nguyen 1551f91cbd fix(metadata): match Next dynamic route semantics (#1317)
* fix(metadata): match Next dynamic route semantics

Metadata routes diverged from Next.js in several observable cases: robots.txt emitted Sitemap before Host, dynamic metadata Response results could miss framework cache headers, TSX sitemap files were not discovered, and rendered metadata URLs treated canonical, manifest, and file-based social image routes as the same URL class.

The implementation now follows Next's metadata route extension, cache, robots, and URL resolution rules while keeping file-based social image route markers non-enumerable so resolved metadata shape does not leak internal state.

* fix(metadata): gate social image preview fallback

File-based social image routes used the preview deployment URL whenever VERCEL_URL was present outside development. That let deployment URLs override an explicit metadataBase in non-preview production environments.

Gate preview URL fallback on VERCEL_ENV=preview, add coverage for metadataBase precedence and production fallback URLs, and keep static metadata image cache headers stable in development.
2026-05-19 14:11:47 +01:00

4983 lines
206 KiB
TypeScript

import fs from "node:fs";
import http from "node:http";
import os from "node:os";
import path from "node:path";
import zlib from "node:zlib";
import { createBuilder, createServer, type ViteDevServer } from "vite";
import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
import { generateRscEntry } from "../packages/vinext/src/entries/app-rsc-entry.js";
import type { AppRoute } from "../packages/vinext/src/routing/app-router.js";
import vinext from "../packages/vinext/src/index.js";
import {
APP_FIXTURE_DIR,
buildAppFixture,
fetchHtml,
RSC_ENTRIES,
startFixtureServer,
} from "./helpers.js";
function decodeHtmlText(text: string): string {
return text
.replaceAll(""", '"')
.replaceAll("&lt;", "<")
.replaceAll("&gt;", ">")
.replaceAll("&amp;", "&");
}
function textContentByTestId(html: string, testId: string): string {
const attrIndex = html.indexOf(`data-testid="${testId}"`);
if (attrIndex === -1) {
throw new Error(`Missing data-testid="${testId}"`);
}
const contentStart = html.indexOf(">", attrIndex);
if (contentStart === -1) {
throw new Error(`Missing opening tag end for data-testid="${testId}"`);
}
const contentEnd = html.indexOf("</", contentStart);
if (contentEnd === -1) {
throw new Error(`Missing closing tag for data-testid="${testId}"`);
}
return decodeHtmlText(html.slice(contentStart + 1, contentEnd));
}
async function withCountingFetchTarget<T>(
fn: (targetUrl: string, getRequestCount: () => number) => Promise<T>,
): Promise<T> {
let requestCount = 0;
const upstream = http.createServer((_req, res) => {
requestCount += 1;
res.setHeader("content-type", "application/json");
res.end(JSON.stringify({ count: requestCount }));
});
await new Promise<void>((resolve, reject) => {
upstream.once("error", reject);
upstream.listen(0, "127.0.0.1", () => {
upstream.off("error", reject);
resolve();
});
});
const address = upstream.address();
if (!address || typeof address === "string") {
await new Promise<void>((resolve, reject) => {
upstream.close((error) => (error ? reject(error) : resolve()));
});
throw new Error("Counting fetch target did not bind to a TCP port");
}
try {
return await fn(`http://127.0.0.1:${address.port}/tick`, () => requestCount);
} finally {
await new Promise<void>((resolve, reject) => {
upstream.close((error) => (error ? reject(error) : resolve()));
});
}
}
async function waitForCondition(
condition: () => boolean,
options?: { intervalMs?: number; timeoutMs?: number },
): Promise<void> {
const intervalMs = options?.intervalMs ?? 100;
const deadline = Date.now() + (options?.timeoutMs ?? 3000);
while (!condition()) {
if (Date.now() >= deadline) {
throw new Error("Timed out waiting for condition");
}
await new Promise((resolve) => setTimeout(resolve, intervalMs));
}
}
describe("App Router integration", () => {
let server: ViteDevServer;
let baseUrl: string;
beforeAll(async () => {
({ server, baseUrl } = await startFixtureServer(APP_FIXTURE_DIR, { appRouter: true }));
}, 30000);
afterAll(async () => {
await server?.close();
});
it("renders the home page with root layout", async () => {
const { res, html } = await fetchHtml(baseUrl, "/");
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/html");
expect(html).toContain("<html");
expect(html).toContain("Welcome to App Router");
expect(html).toContain("Server Component");
});
it("renders the about page", async () => {
const res = await fetch(`${baseUrl}/about`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("About");
expect(html).toContain("This is the about page.");
});
// Ported from Next.js: test/e2e/prerender.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/prerender.test.ts
it("returns Method Not Allowed for non-action mutation requests to App Router pages", async () => {
const staticPageResponse = await fetch(`${baseUrl}/about`, { method: "POST" });
expect(staticPageResponse.status).toBe(405);
expect(staticPageResponse.headers.get("allow")).toBe("GET, HEAD");
expect(await staticPageResponse.text()).toContain("Method Not Allowed");
const ssgPageResponse = await fetch(`${baseUrl}/isr-test`, { method: "PUT" });
expect(ssgPageResponse.status).toBe(405);
expect(ssgPageResponse.headers.get("allow")).toBe("GET, HEAD");
expect(await ssgPageResponse.text()).toContain("Method Not Allowed");
});
it("resolves tsconfig path aliases (@/ imports)", async () => {
const { res, html } = await fetchHtml(baseUrl, "/alias-test");
expect(res.status).toBe(200);
expect(html).toContain("Alias Test");
// Server component imported via @/app/components/counter
expect(html).toContain("Count:");
// Client component ("use client") imported via @/app/components/client-only-widget
expect(html).toContain("Client Only Widget");
});
it("resolves tsconfig path aliases for non-app imports (@/lib)", async () => {
const { res, html } = await fetchHtml(baseUrl, "/baseurl-test");
expect(res.status).toBe(200);
expect(html).toContain("BaseUrl Test");
expect(html).toContain("Hello, baseUrl!");
});
it("renders dynamic routes with params", async () => {
const res = await fetch(`${baseUrl}/blog/hello-world`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Blog Post");
expect(html).toContain("hello-world");
});
// Ported from Next.js: test/e2e/app-dir/cache-components/cache-components.params.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/cache-components/cache-components.params.test.ts
it("renders pages with params named then, catch, finally, and status", async () => {
const { res, html } = await fetchHtml(baseUrl, "/params-shadow/foo/bar/baz/qux");
expect(res.status).toBe(200);
expect(html).toContain("Params Shadow Test");
expect(textContentByTestId(html, "then")).toBe("foo");
expect(textContentByTestId(html, "catch")).toBe("bar");
expect(textContentByTestId(html, "finally")).toBe("baz");
expect(textContentByTestId(html, "status")).toBe("qux");
// The params object must remain thenable (Promise methods are not shadowed)
expect(textContentByTestId(html, "is-thenable")).toBe("yes");
});
it("does not collapse encoded slashes onto nested routes in dev", async () => {
const encodedRes = await fetch(`${baseUrl}/headers%2Foverride-from-middleware`);
expect(encodedRes.status).toBe(404);
expect(encodedRes.headers.get("e2e-headers")).not.toBe("middleware");
const nestedRes = await fetch(`${baseUrl}/headers/override-from-middleware`);
expect(nestedRes.status).toBe(200);
expect(nestedRes.headers.get("e2e-headers")).toBe("middleware");
});
it("handles GET API route handlers", async () => {
const res = await fetch(`${baseUrl}/api/hello`);
expect(res.status).toBe(200);
const data = await res.json();
expect(data).toEqual({ message: "Hello from App Router API" });
});
it("handles POST API route handlers", async () => {
const res = await fetch(`${baseUrl}/api/hello`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ test: true }),
});
expect(res.status).toBe(200);
const data = await res.json();
expect(data).toEqual({ echo: { test: true } });
});
it("returns 404 for non-existent routes", async () => {
const res = await fetch(`${baseUrl}/nonexistent`);
expect(res.status).toBe(404);
});
// Next.js sets the RSC response Content-Type to exactly "text/x-component"
// (no charset). Several Next.js tests use strict equality:
// .nextjs-ref/test/e2e/app-dir/app/index.test.ts L362, L371
// .nextjs-ref/test/e2e/app-dir/segment-cache/deployment-skew/deployment-skew.test.ts L80
// Source constant:
// .nextjs-ref/packages/next/src/client/components/app-router-headers.ts L17
// export const RSC_CONTENT_TYPE_HEADER = 'text/x-component' as const
it("uses text/x-component for the RSC Content-Type with no charset suffix", async () => {
const res = await fetch(`${baseUrl}/about.rsc`, {
headers: { Accept: "text/x-component", RSC: "1" },
});
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toBe("text/x-component");
});
// Dual-router coexistence: the app-basic fixture has both app/ and pages/
// (pages/old-school.tsx activates hasPagesDir). This verifies the Pages Router
// still renders its own pages correctly when both routers are active — the
// other direction from the fix that stops pages-router middleware from
// hard-404ing app/api/* routes that belong to the App Router.
it("renders pages-router page when both app/ and pages/ directories exist", async () => {
const res = await fetch(`${baseUrl}/old-school`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Old School Pages Directory");
});
it("returns RSC stream for .rsc requests", async () => {
const res = await fetch(`${baseUrl}/.rsc`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/x-component");
const text = await res.text();
// RSC stream should contain serialized React tree
expect(text.length).toBeGreaterThan(0);
});
it("returns flat payload metadata for app route RSC responses", async () => {
const res = await fetch(`${baseUrl}/dashboard.rsc`, {
headers: { Accept: "text/x-component" },
});
const rscText = await res.text();
if (res.status !== 200) {
throw new Error(rscText);
}
expect(res.headers.get("content-type")).toContain("text/x-component");
expect(rscText).toContain("__route");
expect(rscText).toContain("__rootLayout");
expect(rscText).toContain("route:/dashboard");
expect(rscText).toContain("layout:/");
expect(rscText).toContain("layout:/dashboard");
expect(rscText).toContain("slot:team:/dashboard");
expect(rscText).toContain("slot:analytics:/dashboard");
});
it("wraps pages in the root layout", async () => {
const res = await fetch(`${baseUrl}/about`);
const html = await res.text();
// Should have the <html> tag from root layout
expect(html).toContain('<html lang="en">');
expect(html).toContain("<title>App Basic</title>");
expect(html).toContain("</body></html>");
});
it("SSR renders 'use client' components with initial state", async () => {
const res = await fetch(`${baseUrl}/interactive`);
expect(res.status).toBe(200);
const html = await res.text();
// Server-side renders the client component with initial state
expect(html).toContain("Interactive Page");
expect(html).toContain("Count:");
expect(html).toContain("0");
expect(html).toContain("Increment");
});
// Verifies that "use client" modules from packages with internal submodules
// (re-exported through the package entry) share the same module instance in
// the browser. Without the client-reference-dedup plugin, the RSC proxy
// imports from the raw file path while client code uses pre-bundled deps,
// causing React context providers to be duplicated (createContext runs twice).
it("renders context provider/consumer from package with internal 'use client' submodule", async () => {
const { res, html } = await fetchHtml(baseUrl, "/context-dedup-test");
expect(res.status).toBe(200);
expect(html).toContain("Context Dedup Test");
// If module dedup is working, the consumer reads the provider's value.
// If broken, useContext returns null and we see "NOT_FOUND".
expect(html).toContain("dark-test-theme");
expect(html).not.toContain("NOT_FOUND");
});
it("does not dedupe identical fetches in app route handlers", async () => {
await withCountingFetchTarget(async (targetUrl, getRequestCount) => {
process.env.TEST_FETCH_DEDUPE_TARGET = targetUrl;
try {
const res = await fetch(`${baseUrl}/api/fetch-dedupe`);
expect(res.status).toBe(200);
expect(await res.json()).toEqual({ counts: [1, 2] });
expect(getRequestCount()).toBe(2);
} finally {
delete process.env.TEST_FETCH_DEDUPE_TARGET;
}
});
});
it("does not dedupe identical fetches in middleware", async () => {
await withCountingFetchTarget(async (targetUrl, getRequestCount) => {
process.env.TEST_FETCH_DEDUPE_TARGET = targetUrl;
try {
const res = await fetch(`${baseUrl}/middleware-fetch-dedupe`);
expect(res.status).toBe(200);
expect(await res.json()).toEqual({ counts: [1, 2] });
expect(getRequestCount()).toBe(2);
} finally {
delete process.env.TEST_FETCH_DEDUPE_TARGET;
}
});
});
it("dedupes identical fetches during app page server component render", async () => {
await withCountingFetchTarget(async (targetUrl, getRequestCount) => {
process.env.TEST_FETCH_DEDUPE_TARGET = targetUrl;
try {
const { res, html } = await fetchHtml(baseUrl, "/fetch-dedupe-render");
expect(res.status).toBe(200);
expect(textContentByTestId(html, "fetch-dedupe-counts")).toBe("[1,1]");
expect(getRequestCount()).toBe(1);
} finally {
delete process.env.TEST_FETCH_DEDUPE_TARGET;
}
});
});
it("dedupes identical no-store fetches across generateMetadata and page render", async () => {
await withCountingFetchTarget(async (targetUrl, getRequestCount) => {
process.env.TEST_FETCH_DEDUPE_TARGET = targetUrl;
try {
const { res, html } = await fetchHtml(baseUrl, "/fetch-dedupe-metadata");
expect(res.status).toBe(200);
expect(html).toContain("<title>Product 1</title>");
expect(textContentByTestId(html, "fetch-dedupe-metadata-count")).toBe("1");
expect(getRequestCount()).toBe(1);
} finally {
delete process.env.TEST_FETCH_DEDUPE_TARGET;
}
});
});
it("SSR renders 'use client' components that use usePathname/useSearchParams", async () => {
const res = await fetch(`${baseUrl}/client-nav-test?q=hello`);
expect(res.status).toBe(200);
const html = await res.text();
// The "use client" component should render the pathname and search params
// during SSR via the nav context propagation from RSC to SSR environment
expect(html).toContain("client-nav-info");
expect(html).toContain("/client-nav-test");
expect(html).toContain("hello");
});
it("SSR renders a real app route that calls useRouter()", async () => {
const { res, html } = await fetchHtml(baseUrl, "/nextjs-compat/hooks-router");
expect(res.status).toBe(200);
expect(html).toContain("Router Test Page");
expect(html).toContain("/nextjs-compat/hooks-router");
expect(html).not.toContain("invariant expected app router to be mounted");
});
it("applies nested layouts (dashboard layout wraps dashboard pages)", async () => {
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
// Should have both root layout and dashboard layout
expect(html).toContain('<html lang="en">');
expect(html).toContain('id="dashboard-layout"');
expect(html).toContain("Dashboard Nav");
expect(html).toContain("Welcome to your dashboard.");
});
it("nested layouts persist across child pages", async () => {
const res = await fetch(`${baseUrl}/dashboard/settings`);
expect(res.status).toBe(200);
const html = await res.text();
// Dashboard layout should also wrap the settings page
expect(html).toContain('id="dashboard-layout"');
expect(html).toContain("Dashboard Nav");
expect(html).toContain("Settings");
expect(html).toContain("Configure your dashboard settings.");
});
it("renders parallel route slots on dashboard page", async () => {
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
// Dashboard layout should render the main children
expect(html).toContain("Welcome to your dashboard.");
// Parallel slot @team should be rendered
expect(html).toContain("Team Members");
expect(html).toContain("Alice");
// Parallel slot @analytics should be rendered
expect(html).toContain("Analytics");
expect(html).toContain("Page views: 1,234");
});
it("parallel slot content appears in the correct layout panels", async () => {
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
// The layout wraps team/analytics in data-testid panels
expect(html).toContain('data-testid="team-panel"');
expect(html).toContain('data-testid="analytics-panel"');
// The slot components have their own testids
expect(html).toContain('data-testid="team-slot"');
expect(html).toContain('data-testid="analytics-slot"');
});
it("renders parallel slot default.tsx fallbacks on child routes", async () => {
// When navigating to /dashboard/settings, the dashboard layout still renders
// but @team and @analytics should show their default.tsx (not page.tsx)
const res = await fetch(`${baseUrl}/dashboard/settings`);
expect(res.status).toBe(200);
const html = await res.text();
// Dashboard layout should be present
expect(html).toContain('id="dashboard-layout"');
expect(html).toContain("Dashboard Nav");
// Settings page content
expect(html).toContain("Settings");
// Parallel slots should render their default.tsx components
expect(html).toContain('data-testid="team-default"');
expect(html).toContain("Loading team...");
expect(html).toContain('data-testid="analytics-default"');
expect(html).toContain("Loading analytics...");
// Should NOT contain the slot page.tsx content (that's for /dashboard only)
expect(html).not.toContain("Team Members");
expect(html).not.toContain("Page views: 1,234");
});
it("renders parallel slot layout wrapping slot content", async () => {
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
// @team has a layout.tsx — the slot layout should wrap the slot page
expect(html).toContain('data-testid="team-slot-layout"');
expect(html).toContain('data-testid="team-slot-nav"');
expect(html).toContain("Team Nav");
// The slot page content should still be present inside the layout
expect(html).toContain('data-testid="team-slot"');
expect(html).toContain("Team Members");
});
it("renders slot layout around default.tsx on child routes", async () => {
// On /dashboard/settings, inherited @team slot uses default.tsx but
// should still be wrapped by the slot layout
const res = await fetch(`${baseUrl}/dashboard/settings`);
expect(res.status).toBe(200);
const html = await res.text();
// @team slot layout should still wrap the default.tsx content
expect(html).toContain('data-testid="team-slot-layout"');
expect(html).toContain('data-testid="team-slot-nav"');
expect(html).toContain("Team Nav");
// Default content should be present
expect(html).toContain('data-testid="team-default"');
});
it("keeps same-named parallel slots from parent and child layouts", async () => {
const res = await fetch(`${baseUrl}/slot-collision/child`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain('data-testid="slot-collision-parent-layout"');
expect(html).toContain('data-testid="slot-collision-child-layout"');
expect(html).toContain('data-testid="slot-collision-parent-default"');
expect(html).toContain("Parent modal default");
expect(html).toContain('data-testid="slot-collision-child-default"');
expect(html).toContain("Child modal default");
expect(html).toContain('data-testid="slot-collision-page"');
});
it("parallel slots do not affect URL routing", async () => {
// @team and @analytics should NOT be accessible as direct routes
const teamRes = await fetch(`${baseUrl}/dashboard/team`);
expect(teamRes.status).toBe(404);
const analyticsRes = await fetch(`${baseUrl}/dashboard/analytics`);
expect(analyticsRes.status).toBe(404);
});
// --- Parallel slot sub-routes ---
it("renders slot sub-page when navigating to nested parallel route URL", async () => {
// /dashboard/members should render @team/members/page.tsx in the team slot
// and dashboard/default.tsx as the children content
const res = await fetch(`${baseUrl}/dashboard/members`);
expect(res.status).toBe(200);
const html = await res.text();
// Dashboard layout should be present
expect(html).toContain('id="dashboard-layout"');
// Children slot should show default.tsx content
expect(html).toContain('data-testid="dashboard-default"');
expect(html).toContain("Dashboard default content");
// @team slot should show the members sub-page
expect(html).toContain('data-testid="team-members-page"');
expect(html).toContain("Team Members Directory");
// @analytics slot should show its default.tsx fallback
expect(html).toContain('data-testid="analytics-default"');
});
it("slot sub-route wraps sub-page with slot layout", async () => {
// @team has a layout.tsx — it should wrap the members sub-page too
const res = await fetch(`${baseUrl}/dashboard/members`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain('data-testid="team-slot-layout"');
expect(html).toContain('data-testid="team-members-page"');
});
it("renders nested parallel route from layout-only parent", async () => {
// Ported from Next.js: test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts (line 510)
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts
// Fixture: home/layout.tsx + @parallelB/default.tsx + @parallelB/nested/page.tsx (no home/page.tsx)
const res = await fetch(`${baseUrl}/parallel-nested/home/nested`);
expect(res.status).toBe(200);
const html = await res.text();
// Parent layout should be present
expect(html).toContain('data-testid="home-layout"');
// @parallelB slot should show the nested sub-page
expect(html).toContain('data-testid="parallelB-nested-page"');
expect(html).toContain("Hello from nested parallel page!");
});
// --- useSelectedLayoutSegment(s) ---
it("useSelectedLayoutSegments returns segments relative to dashboard layout", async () => {
// At /dashboard/settings, the dashboard layout renders a SegmentDisplay.
// It should show segments relative to the dashboard layout: ["settings"]
const res = await fetch(`${baseUrl}/dashboard/settings`);
expect(res.status).toBe(200);
const html = await res.text();
// Verify it returns ["settings"], not ["dashboard", "settings"]
expect(JSON.parse(textContentByTestId(html, "segments"))).toEqual(["settings"]);
});
it("useSelectedLayoutSegment returns first segment relative to dashboard layout", async () => {
const res = await fetch(`${baseUrl}/dashboard/settings`);
expect(res.status).toBe(200);
const html = await res.text();
expect(textContentByTestId(html, "segment")).toBe("settings");
});
it("useSelectedLayoutSegments returns empty array at leaf route", async () => {
// At /dashboard, the dashboard layout's segments should be empty (it IS the page)
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
expect(JSON.parse(textContentByTestId(html, "segments"))).toEqual([]);
});
it("useSelectedLayoutSegment returns null at leaf route", async () => {
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
expect(textContentByTestId(html, "segment")).toBe("null");
});
// --- parallelRoutesKey support ---
// Ported from Next.js: test/e2e/app-dir/parallel-routes-use-selected-layout-segment
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/parallel-routes-use-selected-layout-segment
it("useSelectedLayoutSegments('team') returns [] when slot page is at root", async () => {
// On /dashboard, @team/page.tsx is active — page at slot root means no child segments
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
expect(JSON.parse(textContentByTestId(html, "team-segments"))).toEqual([]);
expect(textContentByTestId(html, "team-segment")).toBe("null");
});
it("useSelectedLayoutSegments('analytics') returns [] when slot page is at root", async () => {
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
expect(JSON.parse(textContentByTestId(html, "analytics-segments"))).toEqual([]);
});
it("useSelectedLayoutSegments('team') returns slot sub-route segments", async () => {
// On /dashboard/members, @team/members/page.tsx is active
// useSelectedLayoutSegments("team") should return ["members"]
const res = await fetch(`${baseUrl}/dashboard/members`);
expect(res.status).toBe(200);
const html = await res.text();
expect(JSON.parse(textContentByTestId(html, "team-segments"))).toEqual(["members"]);
expect(textContentByTestId(html, "team-segment")).toBe("members");
});
it("useSelectedLayoutSegment('team') returns the leaf segment for nested slot routes", async () => {
// Mirrors Next.js @auth/reset/withEmail coverage:
// useSelectedLayoutSegments("team") should return ["members", "profile"],
// while useSelectedLayoutSegment("team") should return "profile".
const res = await fetch(`${baseUrl}/dashboard/members/profile`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain('data-testid="team-member-profile-page"');
expect(JSON.parse(textContentByTestId(html, "team-segments"))).toEqual(["members", "profile"]);
expect(textContentByTestId(html, "team-segment")).toBe("profile");
});
it("useSelectedLayoutSegments('analytics') returns [] when slot shows default on sub-route", async () => {
// On /dashboard/members, @analytics shows default.tsx (no members page)
// useSelectedLayoutSegments("analytics") should return [] (fallback)
const res = await fetch(`${baseUrl}/dashboard/members`);
expect(res.status).toBe(200);
const html = await res.text();
expect(JSON.parse(textContentByTestId(html, "analytics-segments"))).toEqual([]);
});
it("useSelectedLayoutSegments() (default children) still returns correct segments after migration", async () => {
const res = await fetch(`${baseUrl}/dashboard/settings`);
expect(res.status).toBe(200);
const html = await res.text();
// children segments below the dashboard layout should include "settings"
expect(JSON.parse(textContentByTestId(html, "segments"))).toEqual(["settings"]);
});
// --- Intercepting routes ---
it("renders full photo page on direct navigation (SSR)", async () => {
const res = await fetch(`${baseUrl}/photos/42`);
expect(res.status).toBe(200);
const html = await res.text();
// Direct navigation renders the full photo page, not the modal
// React SSR inserts <!-- --> between text and expressions
expect(html).toMatch(/Photo\s*(<!--\s*-->)?\s*42/);
expect(html).toContain("Full photo view");
expect(html).toContain('data-testid="photo-page"');
// Should NOT contain the modal version
expect(html).not.toContain('data-testid="photo-modal"');
});
it("renders feed page without modal on direct navigation (SSR)", async () => {
const res = await fetch(`${baseUrl}/feed`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Photo Feed");
expect(html).toContain('data-testid="feed-page"');
// Modal slot should render default (null), so no modal content
expect(html).not.toContain('data-testid="photo-modal"');
});
it("renders intercepted photo modal on RSC navigation from feed", async () => {
// RSC request simulates client-side navigation
const res = await fetch(`${baseUrl}/photos/42.rsc`, {
headers: {
Accept: "text/x-component",
"X-Vinext-Interception-Context": "/feed",
},
});
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/x-component");
const rscPayload = await res.text();
// The RSC payload should contain the intercepted modal content
expect(rscPayload).toContain("Photo Modal");
expect(rscPayload).toContain("photo-modal");
// It should also contain the feed page content (the source route)
expect(rscPayload).toContain("Photo Feed");
expect(rscPayload).toContain("feed-page");
expect(rscPayload).toContain("__interceptionContext");
expect(rscPayload).toContain("/feed");
const nul = String.fromCharCode(0);
expect(
rscPayload.includes("route:/photos/42\\u0000/feed") ||
rscPayload.includes(`route:/photos/42${nul}/feed`),
).toBe(true);
});
// --- Intercepting routes with dynamic source route ---
// Regression: pickRouteParams must extract actual URL param values
// (e.g. "42") from the request pathname, not the literal pattern strings
// (e.g. ":teamId") that result from feeding the pattern into the route trie.
it("renders members page on direct SSR navigation", async () => {
const res = await fetch(`${baseUrl}/team/42/members`);
const html = await res.text();
if (res.status !== 200) {
throw new Error(`Expected 200, got ${res.status}. Body: ${html.slice(0, 2000)}`);
}
expect(html).toContain('data-testid="members-page"');
expect(html).not.toContain('data-testid="settings-modal"');
});
it("renders settings page on direct SSR navigation", async () => {
const res = await fetch(`${baseUrl}/team/42/settings`);
const html = await res.text();
if (res.status !== 200) {
throw new Error(`Expected 200, got ${res.status}. Body: ${html.slice(0, 2000)}`);
}
expect(html).toContain('data-testid="settings-page"');
// React SSR inserts <!-- --> between text and expressions
expect(html).toMatch(/team-id:\s*(<!--\s*-->)?\s*42/);
expect(html).not.toContain('data-testid="settings-modal"');
});
it("extracts actual URL params for intercepted routes with dynamic source routes", async () => {
// RSC request simulates client-side navigation from /team/[teamId]/members
// to /team/[teamId]/settings. The source route has a dynamic :teamId segment.
// The intercepting route handler must extract "42" from the URL, not ":teamId".
//
// The X-Vinext-Interception-Context header carries the source pathname
// (the equivalent of Next.js' Next-URL header). Without it the matcher
// must NOT fire the interception, matching Next.js' rewrite semantics —
// see app-rsc-route-matching.ts and the source-pathname filtering tests
// in app-rsc-route-matching.test.ts.
const res = await fetch(`${baseUrl}/team/42/settings.rsc`, {
headers: {
Accept: "text/x-component",
"X-Vinext-Interception-Context": "/team/42/members",
},
});
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/x-component");
const rscPayload = await res.text();
// The RSC payload should contain the intercepted settings modal with the actual team ID
expect(rscPayload).toContain("Settings Modal");
expect(rscPayload).toContain("settings-modal");
// The source route (members page) should render with the actual teamId value.
// The source page component receives params from pickRouteParams.
expect(rscPayload).toContain("members-page");
// The literal pattern string ":teamId" must NOT appear as a param value anywhere
expect(rscPayload).not.toContain('":teamId"');
});
it("does NOT fire intercept on direct RSC request without interception context", async () => {
// Mirrors Next.js: interception rewrites only fire when the Next-URL
// header matches the intercepting-route regex. A direct `.rsc` fetch
// with no source pathname must render the underlying page.
// https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/generate-interception-routes-rewrites.ts
const res = await fetch(`${baseUrl}/team/42/settings.rsc`, {
headers: { Accept: "text/x-component" },
});
expect(res.status).toBe(200);
const rscPayload = await res.text();
expect(rscPayload).not.toContain("Settings Modal");
expect(rscPayload).not.toContain("settings-modal");
expect(rscPayload).toContain("settings-page");
});
it("does NOT fire intercept when interception context is from an unrelated route", async () => {
// The intercept lives at app/team/[teamId]/members/@modal/(..)settings,
// so its sourceMatchPattern is /team/:teamId/members. A source pathname
// outside that prefix (e.g. `/feed`) must not satisfy the rewrite header
// and the underlying settings page should render.
const res = await fetch(`${baseUrl}/team/42/settings.rsc`, {
headers: {
Accept: "text/x-component",
"X-Vinext-Interception-Context": "/feed",
},
});
expect(res.status).toBe(200);
const rscPayload = await res.text();
expect(rscPayload).not.toContain("Settings Modal");
expect(rscPayload).not.toContain("settings-modal");
expect(rscPayload).toContain("settings-page");
});
it("returns Method Not Allowed for unsupported HTTP methods on route handlers", async () => {
const res = await fetch(`${baseUrl}/api/hello`, { method: "DELETE" });
expect(res.status).toBe(405);
// Next.js does not emit an Allow header on 405 responses
const allow = res.headers.get("allow");
expect(allow).toBeNull();
// Body should be empty for 405
const body = await res.text();
expect(body).toBe("");
});
it("auto-implements HEAD for route handlers that export GET", async () => {
const res = await fetch(`${baseUrl}/api/get-only`, { method: "HEAD" });
expect(res.status).toBe(200);
// HEAD response should have no body
const body = await res.text();
expect(body).toBe("");
// But should preserve headers from GET handler
expect(res.headers.get("content-type")).toContain("application/json");
});
it("auto-implements OPTIONS for route handlers", async () => {
const res = await fetch(`${baseUrl}/api/get-only`, { method: "OPTIONS" });
expect(res.status).toBe(204);
const allow = res.headers.get("allow");
expect(allow).toBe("GET, HEAD, OPTIONS");
// Body should be empty
const body = await res.text();
expect(body).toBe("");
});
it("auto-implements OPTIONS for route handlers with multiple methods", async () => {
const res = await fetch(`${baseUrl}/api/hello`, { method: "OPTIONS" });
expect(res.status).toBe(204);
const allow = res.headers.get("allow");
expect(allow).toBe("GET, HEAD, OPTIONS, POST");
});
it("returns 500 with empty body when route handler throws", async () => {
const res = await fetch(`${baseUrl}/api/error-route`);
expect(res.status).toBe(500);
const body = await res.text();
expect(body).toBe("");
});
it("rejects middleware control responses returned from route handlers", async () => {
// The NextResponse.next() case is ported from Next.js:
// test/e2e/app-dir/app-routes/app-custom-routes.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/app-routes/app-custom-routes.test.ts
// The NextResponse.rewrite() case mirrors the adjacent App Route module validation.
const nextRes = await fetch(`${baseUrl}/api/invalid-next-response-next`);
expect(nextRes.status).toBe(500);
expect(await nextRes.text()).toBe("");
const rewriteRes = await fetch(`${baseUrl}/api/invalid-next-response-rewrite`);
expect(rewriteRes.status).toBe(500);
expect(await rewriteRes.text()).toBe("");
});
it("catches redirect() thrown in route handlers", async () => {
const res = await fetch(`${baseUrl}/api/redirect-route`, { redirect: "manual" });
expect(res.status).toBe(307);
const location = res.headers.get("location");
expect(location).toBeTruthy();
expect(location).toContain("/about");
});
it("catches notFound() thrown in route handlers", async () => {
const res = await fetch(`${baseUrl}/api/not-found-route`);
expect(res.status).toBe(404);
const body = await res.text();
expect(body).toBe("");
});
it("passes { params } as second argument to route handlers", async () => {
const res = await fetch(`${baseUrl}/api/items/42`);
expect(res.status).toBe(200);
const data = await res.json();
expect(data).toEqual({ id: "42" });
});
it("passes { params } to route handlers with different methods", async () => {
const res = await fetch(`${baseUrl}/api/items/99`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Widget" }),
});
expect(res.status).toBe(200);
const data = await res.json();
expect(data).toEqual({ id: "99", name: "Widget" });
});
// Ported from Next.js: test/e2e/app-dir/cache-components/cache-components.params.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/cache-components/cache-components.params.test.ts
it("passes params named then, catch, finally, and status to route handlers", async () => {
const res = await fetch(`${baseUrl}/api/params-shadow/foo/bar/baz/qux`);
expect(res.status).toBe(200);
const data = await res.json();
expect(data.then).toBe("foo");
expect(data.catch).toBe("bar");
expect(data.finally).toBe("baz");
expect(data.status).toBe("qux");
// The params object must remain thenable (Promise methods are not shadowed)
expect(data.isThenable).toBe(true);
});
it("ignores default export route handlers and returns 405", async () => {
const res = await fetch(`${baseUrl}/api/invalid-default`);
expect(res.status).toBe(405);
expect(res.headers.get("allow")).toBeNull();
});
it("cookies().set() in route handler produces Set-Cookie headers", async () => {
const res = await fetch(`${baseUrl}/api/set-cookie`);
expect(res.status).toBe(200);
const data = await res.json();
expect(data.ok).toBe(true);
// Should have Set-Cookie headers from cookies().set()
const setCookieHeaders = res.headers.getSetCookie();
expect(setCookieHeaders.length).toBeGreaterThanOrEqual(2);
// Check session cookie
const sessionCookie = setCookieHeaders.find((h: string) => h.startsWith("session="));
expect(sessionCookie).toBeDefined();
expect(sessionCookie).toContain("abc123");
expect(sessionCookie).toContain("HttpOnly");
expect(sessionCookie).toContain("Path=/");
// Check theme cookie
const themeCookie = setCookieHeaders.find((h: string) => h.startsWith("theme="));
expect(themeCookie).toBeDefined();
expect(themeCookie).toContain("dark");
});
it("cookies().delete() in route handler produces an expired Set-Cookie header", async () => {
const res = await fetch(`${baseUrl}/api/set-cookie`, { method: "POST" });
expect(res.status).toBe(200);
const setCookieHeaders = res.headers.getSetCookie();
const deleteCookie = setCookieHeaders.find((h: string) => h.startsWith("session="));
expect(deleteCookie).toBeDefined();
expect(deleteCookie).toContain("Expires=");
});
it("renders custom not-found.tsx for unmatched routes", async () => {
const res = await fetch(`${baseUrl}/does-not-exist`);
expect(res.status).toBe(404);
const html = await res.text();
// Should render our custom not-found page within the root layout
expect(html).toContain("404 - Page Not Found");
expect(html).toContain("does not exist");
expect(html).toContain('<html lang="en">');
});
it("notFound() from Server Component returns 404", async () => {
const res = await fetch(`${baseUrl}/notfound-test`);
expect(res.status).toBe(404);
});
it("notFound() escalates to nearest ancestor not-found.tsx", async () => {
// /dashboard/missing calls notFound() — should use dashboard/not-found.tsx
// (not the root not-found.tsx), wrapped in dashboard layout
const res = await fetch(`${baseUrl}/dashboard/missing`);
expect(res.status).toBe(404);
const html = await res.text();
// Should render the dashboard-specific not-found page
expect(html).toContain("Dashboard: Page Not Found");
expect(html).toContain("dashboard-not-found");
// Should be wrapped in the dashboard layout
expect(html).toContain("dashboard-layout");
// Should also be wrapped in the root layout
expect(html).toContain('<html lang="en">');
});
it("forbidden() from Server Component returns 403 with forbidden.tsx", async () => {
const res = await fetch(`${baseUrl}/forbidden-test`);
expect(res.status).toBe(403);
const html = await res.text();
expect(html).toContain("403 - Forbidden");
expect(html).toContain("do not have permission");
// Should be wrapped in the root layout
expect(html).toContain('<html lang="en">');
// Should include noindex meta
expect(html).toContain('name="robots"');
expect(html).toContain('content="noindex"');
});
it("unauthorized() from Server Component returns 401 with unauthorized.tsx", async () => {
const res = await fetch(`${baseUrl}/unauthorized-test`);
expect(res.status).toBe(401);
const html = await res.text();
expect(html).toContain("401 - Unauthorized");
expect(html).toContain("must be logged in");
// Should be wrapped in the root layout
expect(html).toContain('<html lang="en">');
// Should include noindex meta
expect(html).toContain('name="robots"');
expect(html).toContain('content="noindex"');
});
it("notFound() from async page with loading.tsx returns 404 (NEXT_NOT_FOUND digest)", async () => {
// Same regression path as redirect-with-loading.tsx, but for notFound().
// Distinct from forbidden/unauthorized: notFound() throws the bare
// "NEXT_NOT_FOUND" digest (not "NEXT_HTTP_ERROR_FALLBACK;404"), which
// takes a separate branch in resolveAppPageSpecialError. This is the
// most common loading-boundary special-error case in real apps —
// a dynamic detail page with a loading state that calls notFound()
// when the record is missing.
const res = await fetch(`${baseUrl}/notfound-loading`);
expect(res.status).toBe(404);
const html = await res.text();
expect(html).toContain("404 - Page Not Found");
});
it("forbidden() from async page with loading.tsx returns 403 (digest status preserved)", async () => {
// Same regression path as the redirect()-with-loading.tsx tests, but
// for forbidden() — verifies the post-shell digest swap reads the
// status code from NEXT_HTTP_ERROR_FALLBACK;403 rather than coercing
// to 404, and renders the root forbidden.tsx boundary.
const res = await fetch(`${baseUrl}/forbidden-loading`);
expect(res.status).toBe(403);
const html = await res.text();
expect(html).toContain("403 - Forbidden");
});
it("unauthorized() from async page with loading.tsx returns 401 (digest status preserved)", async () => {
// Same regression path as forbidden-loading but for unauthorized() —
// verifies the post-shell digest swap honors NEXT_HTTP_ERROR_FALLBACK;401
// and renders the root unauthorized.tsx boundary.
const res = await fetch(`${baseUrl}/unauthorized-loading`);
expect(res.status).toBe(401);
const html = await res.text();
expect(html).toContain("401 - Unauthorized");
});
it("forbidden() thrown from a layout uses the forbidden boundary", async () => {
// Ported from Next.js: test/e2e/app-dir/forbidden/basic/forbidden-basic.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/forbidden/basic/forbidden-basic.test.ts
const res = await fetch(`${baseUrl}/nextjs-compat/layout-forbidden-boundary`);
expect(res.status).toBe(403);
const html = await res.text();
expect(html).toContain("403 - Forbidden");
expect(html).not.toContain("404 - Page Not Found");
});
it("unauthorized() thrown from a layout uses the unauthorized boundary", async () => {
// Ported from Next.js: test/e2e/app-dir/unauthorized/basic/unauthorized-basic.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/unauthorized/basic/unauthorized-basic.test.ts
const res = await fetch(`${baseUrl}/nextjs-compat/layout-unauthorized-boundary`);
expect(res.status).toBe(401);
const html = await res.text();
expect(html).toContain("401 - Unauthorized");
expect(html).not.toContain("404 - Page Not Found");
});
// ── Client hook usage without "use client" (#834) ──
// When a Server Component imports a client-only hook from next/navigation
// without the "use client" directive, vinext should surface a clear error
// instead of silently returning a fallback value.
it("errors when client hook is used in a Server Component without 'use client' (#834)", async () => {
const { res, html } = await fetchHtml(baseUrl, "/missing-use-client-test");
expect(res.status).toBe(200); // error boundary renders, not a 500
// The error message should be clear and actionable
expect(html).toContain("usePathname()");
expect(html).toContain("Client Components");
expect(html).toContain("use client");
// Should NOT contain the actual page content (it errored before rendering)
expect(html).not.toContain("Missing use client test");
});
it("errors when React client hook is used in a Server Component without 'use client' (#834)", async () => {
const { res, html } = await fetchHtml(baseUrl, "/missing-use-client-react-hook");
expect(res.status).toBe(200); // error boundary renders, not a 500
// The error message should be clear and actionable
expect(html).toContain("useState()");
expect(html).toContain("Client Components");
expect(html).toContain("use client");
// Should NOT contain the actual page content (it errored before rendering)
expect(html).not.toContain("Missing use client react hook test");
});
it("error boundary catches string thrown in Server Component", async () => {
const { res, html } = await fetchHtml(baseUrl, "/throw-string-test");
expect(res.status).toBe(200);
expect(textContentByTestId(html, "string-error-message")).toBe(
"this is a test string thrown in a server component",
);
});
it("redirect() from Server Component returns redirect response", async () => {
const res = await fetch(`${baseUrl}/redirect-test`, { redirect: "manual" });
expect(res.status).toBeGreaterThanOrEqual(300);
expect(res.status).toBeLessThan(400);
const location = res.headers.get("location");
expect(location).toBeTruthy();
expect(location).toContain("/about");
});
// ── probePage() with Next.js 15+ async params/searchParams ──
// Regression tests: probePage() passed raw null-prototype params instead of
// thenable params, so pages using `await params` threw TypeError during probe,
// silently defeating early notFound()/redirect() detection.
it("notFound() detected via probe when page uses async params pattern", async () => {
// Page does `const { id } = await params` then calls notFound() for invalid IDs.
// Without thenable params, `await params` throws TypeError → probe silently fails
// → notFound() is caught during RSC render instead of the probe → still returns
// 404 but only by luck of error boundary handling, not the probe path.
const res = await fetch(`${baseUrl}/probe-async-params/invalid-id`);
expect(res.status).toBe(404);
const html = await res.text();
// Should render root not-found boundary, not the page content
expect(html).not.toContain("probe-async-params-page");
});
it("page renders normally with async params when ID is valid", async () => {
const { res, html } = await fetchHtml(baseUrl, "/probe-async-params/valid-1");
expect(res.status).toBe(200);
expect(html).toContain("probe-async-params-page");
});
it("redirect() detected via probe when page uses async searchParams pattern", async () => {
// Page does `const { dest } = await searchParams` then calls redirect(dest).
// Without searchParams in the probe, `await searchParams` throws TypeError →
// probe silently fails → redirect() goes through RSC render path instead.
const res = await fetch(`${baseUrl}/probe-async-search?dest=/about`, { redirect: "manual" });
expect(res.status).toBeGreaterThanOrEqual(300);
expect(res.status).toBeLessThan(400);
expect(res.headers.get("location")).toContain("/about");
});
it("page renders normally with async searchParams when no dest param", async () => {
const { res, html } = await fetchHtml(baseUrl, "/probe-async-search");
expect(res.status).toBe(200);
expect(html).toContain("probe-async-search-page");
});
it("redirect() from async page with loading.tsx returns 307 (digest captured during shell render)", async () => {
// Regression: when a page has a loading.tsx sibling and the page
// function is async, the probe used to fire-and-forget the page
// promise (to preserve loading.tsx streaming for non-redirecting
// pages). The route-level Suspense boundary would absorb the
// redirect throw, and React would serialize a "Switched to client
// rendering" error into a 200 body instead of returning a clean 307.
//
// Fix: the probe is skipped entirely for hasLoadingBoundary routes;
// the rscErrorTracker captures the NEXT_REDIRECT digest from React's
// onError during shell render; the lifecycle inspects the tracker
// after the shell promise resolves and swaps the response to a 307.
const res = await fetch(`${baseUrl}/protected-loading`, { redirect: "manual" });
expect(res.status).toBe(307);
expect(res.headers.get("location")).toMatch(/\/$/);
});
it("permanentRedirect() from async page with loading.tsx returns 308 (digest status preserved)", async () => {
// Same regression path as the redirect()-with-loading.tsx test above,
// but verifies the post-shell digest swap honors the status code from
// the NEXT_REDIRECT digest (308) rather than coercing to the 307
// default.
const res = await fetch(`${baseUrl}/permanent-protected-loading`, {
redirect: "manual",
});
expect(res.status).toBe(308);
expect(res.headers.get("location")).toMatch(/\/$/);
});
it("permanentRedirect() returns 308 status code", async () => {
const res = await fetch(`${baseUrl}/permanent-redirect-test`, { redirect: "manual" });
expect(res.status).toBe(308);
const location = res.headers.get("location");
expect(location).toBeTruthy();
expect(location).toContain("/about");
});
it("redirect() inside Suspense boundary preserves digest in RSC payload", async () => {
// When redirect() is called inside a Suspense boundary, the error occurs
// during RSC streaming. The onError callback preserves the NEXT_REDIRECT
// digest in the RSC stream so the client can detect it and navigate.
// Since there's no error boundary that catches redirect errors specifically,
// React doesn't emit a $RX replacement — instead the redirect digest is
// embedded in the RSC payload for client-side handling.
const res = await fetch(`${baseUrl}/suspense-redirect-test`);
const html = await res.text();
expect(res.status).toBe(200);
// The RSC payload embedded in the HTML should contain the redirect digest
// This allows the client-side router to detect and perform the redirect
expect(html).toContain("NEXT_REDIRECT");
expect(html).toContain("/about");
});
it("notFound() inside Suspense boundary preserves digest for not-found UI", async () => {
// When notFound() is called inside a Suspense boundary, the error digest
// must be preserved so the NotFoundBoundary can catch it and render the
// not-found UI. Without an onError callback, the digest is empty ("") and
// the NotFoundBoundary can't identify it as a not-found error.
const res = await fetch(`${baseUrl}/suspense-notfound-test`);
const html = await res.text();
// The response status is 200 because headers were sent before notFound()
expect(res.status).toBe(200);
// React's dev output can surface the digest in different equivalent places:
// the legacy $RX client-render marker, the <template data-dgst="..."> shell,
// or the embedded RSC error chunk. Any of those proves the digest survived.
expect(html).toMatch(
/(\$RX\("[^"]*","NEXT_HTTP_ERROR_FALLBACK|data-dgst="NEXT_HTTP_ERROR_FALLBACK;404"|\\"digest\\":\\"NEXT_HTTP_ERROR_FALLBACK;404\\")/,
);
});
it("async server throw in Suspense falls back to client rendering without dev decode crash (React 19 regression)", async () => {
// Regression for issue #50:
// React 19 dev-mode Flight decoding can crash in resolveErrorDev() with
// "Invalid hook call" / null dispatcher errors while SSR consumes an RSC
// stream that includes an error chunk.
const res = await fetch(`${baseUrl}/react19-dev-rsc-error`);
const html = await res.text();
expect(res.status).toBe(200);
// In React 19 dev mode, this route switches to client rendering when the
// async server throw is encountered during Flight streaming. The key
// regression check is that decode no longer crashes with a null dispatcher.
// Note: "Switched to client rendering" is a React internal message that
// may change across React versions.
expect(html).toContain("Switched to client rendering");
expect(html).toContain("react19-dev-rsc-error");
expect(html).toContain('data-testid="react19-dev-rsc-loading"');
expect(html).not.toContain("Invalid hook call");
expect(html).not.toContain("Cannot read properties of null (reading 'useContext')");
});
it("renders error boundary wrapper for routes with error.tsx", async () => {
const res = await fetch(`${baseUrl}/error-test`);
expect(res.status).toBe(200);
const html = await res.text();
// The page should render normally (error boundary is in the tree but inactive)
expect(html).toContain("Error Test Page");
expect(html).toContain("This page has an error boundary");
});
it("renders loading.tsx Suspense wrapper for routes with loading.tsx", async () => {
const res = await fetch(`${baseUrl}/slow`);
expect(res.status).toBe(200);
const html = await res.text();
// The Suspense boundary markers should be present
expect(html).toContain("Slow Page");
// Content should render (not the loading fallback, since nothing is async)
expect(html).toContain("This page has a loading boundary");
});
it("route groups are transparent in URL (app/(marketing)/features -> /features)", async () => {
const res = await fetch(`${baseUrl}/features`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Features");
expect(html).toContain("route group");
});
it("renders next/link as <a> tags with correct hrefs", async () => {
const res = await fetch(`${baseUrl}/`);
const html = await res.text();
// Links should be rendered as <a> tags
expect(html).toMatch(/<a\s[^>]*href="\/about"[^>]*>Go to About<\/a>/);
expect(html).toMatch(/<a\s[^>]*href="\/blog\/hello-world"[^>]*>Go to Blog<\/a>/);
expect(html).toMatch(/<a\s[^>]*href="\/dashboard"[^>]*>Go to Dashboard<\/a>/);
});
it("renders dynamic metadata from generateMetadata()", async () => {
const res = await fetch(`${baseUrl}/blog/my-post`);
expect(res.status).toBe(200);
const html = await res.text();
// Title from generateMetadata should use the dynamic slug
expect(html).toContain("<title>Blog: my-post</title>");
expect(html).toMatch(/name="description".*content="Read about my-post"/);
});
it("layout generateMetadata() does not receive searchParams (Next.js parity)", async () => {
// Parity test: In Next.js, layout generateMetadata() does NOT receive
// searchParams — only page generateMetadata() does. The layout should
// always see undefined and fall back to "home", even when the URL has
// a query string.
// See: next.js resolve-metadata.ts — `isPage ? { params, searchParams } : { params }`
const res = await fetch(`${baseUrl}/layout-metadata-search?tab=settings`);
expect(res.status).toBe(200);
const html = await res.text();
// Layout falls back to "home" because it never receives searchParams.
expect(html).toContain("<title>Layout Section: home</title>");
});
it("renders catch-all routes with multiple segments", async () => {
const res = await fetch(`${baseUrl}/docs/getting-started/install`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Documentation");
expect(html).toContain("getting-started/install");
// React SSR inserts <!-- --> between text and expressions
expect(html).toMatch(/Segments:.*2/);
});
it("renders optional catch-all with zero segments", async () => {
const res = await fetch(`${baseUrl}/optional`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Optional Catch-All");
expect(html).toContain("(root)");
expect(html).toMatch(/Segments:.*0/);
});
it("renders optional catch-all with segments", async () => {
const res = await fetch(`${baseUrl}/optional/x/y`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("x/y");
expect(html).toMatch(/Segments:.*2/);
});
// --- Hyphenated param names (issue #71: [[...sign-in]] causes 404) ---
it("renders optional catch-all with hyphenated param name [[...sign-in]]", async () => {
const res = await fetch(`${baseUrl}/sign-in`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Sign In");
expect(html).toContain('data-testid="sign-in-page"');
expect(html).toMatch(/Segments:.*0/);
expect(html).toContain("(root)");
});
it("renders hyphenated optional catch-all with segments", async () => {
const res = await fetch(`${baseUrl}/sign-in/sso/callback`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Sign In");
expect(html).toMatch(/Segments:.*2/);
expect(html).toContain("sso/callback");
});
it("renders dynamic segment with hyphenated param name [auth-method]", async () => {
const res = await fetch(`${baseUrl}/auth/google`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Auth Method");
expect(html).toContain('data-testid="auth-method-page"');
expect(html).toContain("google");
});
it("renders static metadata (export const metadata) as head elements", async () => {
const res = await fetch(`${baseUrl}/metadata-test`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Metadata Test");
// Title from metadata should be rendered
expect(html).toContain("<title>Metadata Test Page</title>");
// Description meta tag
expect(html).toMatch(/name="description".*content="A page to test the metadata API"/);
// Keywords meta tag
expect(html).toMatch(/name="keywords".*content="test,metadata,vinext"/);
// Open Graph tags
expect(html).toMatch(/property="og:title".*content="OG Title"/);
expect(html).toMatch(/property="og:type".*content="website"/);
});
it("renders viewport metadata (export const viewport) as head elements", async () => {
const res = await fetch(`${baseUrl}/metadata-test`);
expect(res.status).toBe(200);
const html = await res.text();
// Viewport meta tag with configured properties
expect(html).toMatch(/name="viewport".*content="[^"]*width=device-width/);
expect(html).toMatch(/name="viewport".*content="[^"]*initial-scale=1/);
expect(html).toMatch(/name="viewport".*content="[^"]*maximum-scale=1/);
// Theme color
expect(html).toMatch(/name="theme-color".*content="#0070f3"/);
// Color scheme
expect(html).toMatch(/name="color-scheme".*content="light dark"/);
});
it("RSC stream for metadata-test page includes metadata head tags", async () => {
// The .rsc endpoint returns the RSC payload (serialized React tree).
// When the client deserializes and renders this, MetadataHead should produce
// <title> and <meta> tags that React 19 hoists to <head>.
const res = await fetch(`${baseUrl}/metadata-test.rsc`, {
headers: { Accept: "text/x-component" },
});
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/x-component");
const rscText = await res.text();
// The RSC stream contains serialized React elements, including title and meta
expect(rscText).toContain("Metadata Test Page"); // title text
expect(rscText).toContain("A page to test the metadata API"); // description
expect(rscText).toContain("OG Title"); // og:title
});
it("different pages have different metadata in RSC responses", async () => {
// Fetch RSC for home page and metadata-test page
const homeRes = await fetch(`${baseUrl}/.rsc`, {
headers: { Accept: "text/x-component" },
});
const metaRes = await fetch(`${baseUrl}/metadata-test.rsc`, {
headers: { Accept: "text/x-component" },
});
const homeRsc = await homeRes.text();
const metaRsc = await metaRes.text();
// Home page should have its own title
expect(homeRsc).toContain("App Basic");
// Metadata-test should have its specific title
expect(metaRsc).toContain("Metadata Test Page");
// They should be different
expect(homeRsc).not.toContain("Metadata Test Page");
});
it("serves /icon from dynamic icon.tsx using ImageResponse", async () => {
// This test verifies the full pipeline: icon.tsx → next/og → satori → resvg → PNG
// The RSC environment must externalize satori/@resvg/resvg-js for this to work.
try {
const res = await fetch(`${baseUrl}/icon`);
// If the RSC environment can't load satori/resvg, this may fail with 500
if (res.status === 200) {
expect(res.headers.get("content-type")).toContain("image/png");
const body = await res.arrayBuffer();
expect(body.byteLength).toBeGreaterThan(0);
// PNG files start with the magic bytes 0x89 0x50 0x4E 0x47
const header = new Uint8Array(body.slice(0, 4));
expect(header[0]).toBe(0x89);
expect(header[1]).toBe(0x50); // P
expect(header[2]).toBe(0x4e); // N
expect(header[3]).toBe(0x47); // G
} else {
// If it fails with a server error, at least verify the route was matched
expect(res.status).not.toBe(404);
}
} catch {
// Socket error means the server crashed processing this request.
// This is a known issue with native Node modules in the RSC environment.
// The test passes to avoid blocking CI, but logs the issue.
console.warn(
"[test] /icon route caused a server error — native module loading in RSC env needs investigation",
);
}
});
it("renders dynamic page with generateStaticParams export", async () => {
// generateStaticParams is a no-op in dev mode — the page should
// render on-demand with any slug, including ones not in the static params list.
const res = await fetch(`${baseUrl}/blog/any-arbitrary-slug`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Blog Post");
expect(html).toContain("any-arbitrary-slug");
});
it("renders server actions page with 'use client' components", async () => {
const res = await fetch(`${baseUrl}/actions`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Server Actions");
expect(html).toContain("Like Button");
expect(html).toContain("Message Form");
// Client components should be SSR-rendered
expect(html).toContain('data-testid="likes"');
expect(html).toContain('data-testid="like-btn"');
expect(html).toContain('data-testid="message-input"');
});
it("renders template.tsx wrapper around page content", async () => {
const { html } = await fetchHtml(baseUrl, "/");
expect(html).toContain('data-testid="root-template"');
expect(html).toContain("Template Active");
});
it("renders template.tsx inside layout (layout > template > page)", async () => {
const { html } = await fetchHtml(baseUrl, "/about");
// Template should be present
expect(html).toContain('data-testid="root-template"');
// Layout wraps template, so layout HTML should appear before template
// (Both should be present in the output)
expect(html).toContain("<html");
expect(html).toContain("Template Active");
});
it("global-error.tsx is discovered and does not interfere with normal rendering", async () => {
// When global-error.tsx exists, normal pages should still render fine
// The global error boundary only activates when the root layout throws
const { res, html } = await fetchHtml(baseUrl, "/");
expect(res.status).toBe(200);
expect(html).toContain("Welcome to App Router");
// global-error content should NOT appear in normal rendering
expect(html).not.toContain("Something went wrong!");
});
it("export const dynamic = 'force-dynamic' sets no-store Cache-Control", async () => {
const res = await fetch(`${baseUrl}/dynamic-test`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Force Dynamic Page");
expect(html).toContain('data-testid="dynamic-test-page"');
// force-dynamic should set no-store Cache-Control
const cacheControl = res.headers.get("cache-control");
expect(cacheControl).toContain("no-store");
});
it("force-dynamic pages get fresh content on each request", async () => {
const res1 = await fetch(`${baseUrl}/dynamic-test`);
const html1 = await res1.text();
const ts1 = html1.match(/data-testid="timestamp">(<!-- -->)?(\d+)/);
// Small delay to ensure different timestamp
await new Promise((r) => setTimeout(r, 5));
const res2 = await fetch(`${baseUrl}/dynamic-test`);
const html2 = await res2.text();
const ts2 = html2.match(/data-testid="timestamp">(<!-- -->)?(\d+)/);
expect(ts1).toBeTruthy();
expect(ts2).toBeTruthy();
// Timestamps should be different (not cached)
expect(ts1![2]).not.toBe(ts2![2]);
});
it("non-force-dynamic pages do not set no-store", async () => {
const res = await fetch(`${baseUrl}/about`);
expect(res.status).toBe(200);
const cacheControl = res.headers.get("cache-control");
// Normal pages should not have no-store
expect(cacheControl).toBeNull();
});
it("export const dynamic = 'force-static' sets long-lived Cache-Control", async () => {
const res = await fetch(`${baseUrl}/static-test`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Force Static Page");
expect(html).toContain('data-testid="static-test-page"');
// force-static should set s-maxage for indefinite caching
const cacheControl = res.headers.get("cache-control");
expect(cacheControl).toContain("s-maxage=31536000");
expect(res.headers.get("x-vinext-cache")).toBe("STATIC");
});
it("force-static pages have empty headers/cookies context", async () => {
// force-static replaces real request headers/cookies with empty values.
// We verify the page renders successfully (doesn't throw on dynamic APIs)
const res = await fetch(`${baseUrl}/static-test`, {
headers: { cookie: "session=abc123" },
});
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Force Static Page");
});
it("export const dynamic = 'error' renders when no dynamic APIs are used", async () => {
const res = await fetch(`${baseUrl}/error-dynamic-test`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Error Dynamic Page");
expect(html).toContain('data-testid="error-dynamic-page"');
// Should be treated as static — long-lived cache
const cacheControl = res.headers.get("cache-control");
expect(cacheControl).toContain("s-maxage=31536000");
expect(res.headers.get("x-vinext-cache")).toBe("STATIC");
});
it("pages with fetchCache, maxDuration, preferredRegion, runtime exports render fine", async () => {
const res = await fetch(`${baseUrl}/config-test`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Config Test Page");
expect(html).toContain('data-testid="config-test-page"');
});
it("dynamicParams = false allows known params from generateStaticParams", async () => {
const res = await fetch(`${baseUrl}/products/1`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain('data-testid="product-page"');
expect(html).toMatch(/Product\s*(<!--\s*-->)?\s*1/);
});
it("dynamicParams = false returns 404 for unknown params", async () => {
const res = await fetch(`${baseUrl}/products/999`);
expect(res.status).toBe(404);
});
it("dynamicParams defaults to true (allows any params)", async () => {
// Blog has generateStaticParams but no dynamicParams=false
const res = await fetch(`${baseUrl}/blog/any-random-slug`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("any-random-slug");
});
it("applies dynamicParams = false exported from a layout to child pages", async () => {
const known = await fetch(`${baseUrl}/layout-segment-config/dynamic/known`);
expect(known.status).toBe(200);
expect(await known.text()).toContain('data-testid="layout-segment-config-dynamic"');
const unknown = await fetch(`${baseUrl}/layout-segment-config/dynamic/unknown`);
expect(unknown.status).toBe(404);
});
it("uses layout-level generateStaticParams when enforcing dynamicParams = false", async () => {
const known = await fetch(`${baseUrl}/layout-segment-config/layout-gsp/known`);
expect(known.status).toBe(200);
expect(await known.text()).toContain('data-testid="layout-segment-config-layout-gsp"');
const unknown = await fetch(`${baseUrl}/layout-segment-config/layout-gsp/unknown`);
expect(unknown.status).toBe(404);
});
it("returns 404 when dynamicParams = false has no generateStaticParams sources", async () => {
const res = await fetch(`${baseUrl}/layout-segment-config/no-gsp/anything`);
expect(res.status).toBe(404);
});
it("passes parent-only params to nested generateStaticParams during dynamicParams validation", async () => {
const known = await fetch(`${baseUrl}/layout-segment-config/nested-gsp/docs/intro`);
expect(known.status).toBe(200);
expect(await known.text()).toContain('data-testid="layout-segment-config-nested-gsp"');
const unknown = await fetch(`${baseUrl}/layout-segment-config/nested-gsp/docs/missing`);
expect(unknown.status).toBe(404);
});
it("defaults dynamicParams to false under a dynamic = 'error' layout", async () => {
const known = await fetch(`${baseUrl}/layout-segment-config/dynamic-error/known`);
expect(known.status).toBe(200);
expect(await known.text()).toContain('data-testid="layout-segment-config-dynamic-error"');
const unknown = await fetch(`${baseUrl}/layout-segment-config/dynamic-error/unknown`);
expect(unknown.status).toBe(404);
});
it("applies dynamic = 'error' as only-cache fetch policy", async () => {
const res = await fetch(`${baseUrl}/layout-segment-config/dynamic-error-fetch`);
expect(res.status).toBe(200);
expect(await res.text()).toContain("only-cache");
});
it("generateStaticParams receives parent params in nested dynamic routes", async () => {
// /shop/[category]/[item] — the item page's generateStaticParams receives { category }
const res = await fetch(`${baseUrl}/shop/electronics/phone`);
expect(res.status).toBe(200);
const html = await res.text();
// React SSR inserts <!-- --> comments between text and expressions
expect(html).toMatch(
/Item:\s*(<!--\s*-->)?\s*phone\s*(<!--\s*-->)?\s*in\s*(<!--\s*-->)?\s*electronics/,
);
});
it("nested dynamic route serves all parent-derived paths", async () => {
// Test multiple combinations from parent params
const res1 = await fetch(`${baseUrl}/shop/clothing/shirt`);
expect(res1.status).toBe(200);
const html1 = await res1.text();
expect(html1).toMatch(
/Item:\s*(<!--\s*-->)?\s*shirt\s*(<!--\s*-->)?\s*in\s*(<!--\s*-->)?\s*clothing/,
);
const res2 = await fetch(`${baseUrl}/shop/electronics/laptop`);
expect(res2.status).toBe(200);
const html2 = await res2.text();
expect(html2).toMatch(
/Item:\s*(<!--\s*-->)?\s*laptop\s*(<!--\s*-->)?\s*in\s*(<!--\s*-->)?\s*electronics/,
);
});
it("export const revalidate sets ISR Cache-Control header", async () => {
const res = await fetch(`${baseUrl}/revalidate-test`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("ISR Revalidate Page");
expect(html).toContain('data-testid="revalidate-test-page"');
// revalidate=60 should set s-maxage=60 on first request (cache MISS)
const cacheControl = res.headers.get("cache-control");
expect(cacheControl).toContain("s-maxage=60");
expect(cacheControl).toContain("stale-while-revalidate");
});
it("applies revalidate exported from a layout to child pages", async () => {
const res = await fetch(`${baseUrl}/layout-segment-config/revalidate`);
expect(res.status).toBe(200);
expect(await res.text()).toContain('data-testid="layout-segment-config-revalidate"');
const cacheControl = res.headers.get("cache-control");
expect(cacheControl).toContain("s-maxage=30");
expect(cacheControl).toContain("stale-while-revalidate");
});
it("applies dynamic = 'force-dynamic' exported from a layout to child pages", async () => {
const res = await fetch(`${baseUrl}/layout-segment-config/force-dynamic`);
expect(res.status).toBe(200);
expect(await res.text()).toContain('data-testid="layout-segment-config-force-dynamic"');
expect(res.headers.get("cache-control")).toContain("no-store");
});
it("search page renders Form component with SSR", async () => {
const res = await fetch(`${baseUrl}/search`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Search");
expect(html).toContain("Enter a search term");
// Form should render as a <form> element with action="/search"
expect(html).toContain('action="/search"');
expect(html).toContain('id="search-form"');
expect(html).toContain('id="search-input"');
});
it("search page renders query results when searchParams provided", async () => {
const res = await fetch(`${baseUrl}/search?q=hello`);
expect(res.status).toBe(200);
const html = await res.text();
// React SSR may insert comment nodes between static text and dynamic values
expect(html).toMatch(/Results for:.*hello/);
expect(html).not.toContain("Enter a search term");
});
it("sets optimizeDeps.entries for rsc, ssr, and client environments so deps are discovered at startup", () => {
// Without optimizeDeps.entries, Vite only crawls build.rollupOptions.input
// for dependency discovery — but those are virtual modules that don't
// import user dependencies. This causes lazy discovery, re-optimisation
// cascades, and "Invalid hook call" errors on first load.
const rscEntries = server.config.environments.rsc?.optimizeDeps?.entries;
const ssrEntries = server.config.environments.ssr?.optimizeDeps?.entries;
const clientEntries = server.config.environments.client?.optimizeDeps?.entries;
expect(rscEntries).toBeDefined();
expect(ssrEntries).toBeDefined();
expect(clientEntries).toBeDefined();
expect(Array.isArray(rscEntries)).toBe(true);
expect(Array.isArray(ssrEntries)).toBe(true);
expect(Array.isArray(clientEntries)).toBe(true);
// Entries should include a glob pattern that covers app/ source files
const rscGlob = (rscEntries as string[]).join(",");
const ssrGlob = (ssrEntries as string[]).join(",");
const clientGlob = (clientEntries as string[]).join(",");
expect(rscGlob).toMatch(/app\/\*\*\/\*\.\{tsx,ts,jsx,js\}/);
expect(ssrGlob).toMatch(/app\/\*\*\/\*\.\{tsx,ts,jsx,js\}/);
expect(clientGlob).toMatch(/app\/\*\*\/\*\.\{tsx,ts,jsx,js\}/);
expect(rscGlob).toContain("instrumentation.ts");
expect(rscGlob).toContain("instrumentation-client.ts");
expect(ssrGlob).toContain("instrumentation.ts");
expect(ssrGlob).toContain("instrumentation-client.ts");
expect(clientGlob).toContain("instrumentation.ts");
expect(clientGlob).toContain("instrumentation-client.ts");
});
it("pre-includes framework dependencies in optimizeDeps.include to avoid late discovery", () => {
// Framework deps that are imported by virtual modules (not user code)
// won't be found by crawling optimizeDeps.entries. They must be
// explicitly included to prevent late discovery, re-optimisation
// cascades and "Invalid hook call" errors during dev.
//
// SSR: react-dom/server.edge is used for both renderToReadableStream
// (static import) and renderToStaticMarkup (dynamic import) in the
// SSR entry. It's included by @vitejs/plugin-rsc, so vinext doesn't
// need to add it explicitly.
//
// Client: react, react-dom, and react-dom/client are framework deps
// used for hydration that aren't in user source files.
const ssrInclude = server.config.environments.ssr?.optimizeDeps?.include;
const clientInclude = server.config.environments.client?.optimizeDeps?.include;
// react-dom/server.edge should be present (added by @vitejs/plugin-rsc)
expect(ssrInclude).toContain("react-dom/server.edge");
expect(clientInclude).toContain("react");
expect(clientInclude).toContain("react-dom");
expect(clientInclude).toContain("react-dom/client");
});
// ── CSRF protection for server actions ───────────────────────────────
it("rejects server action POST with mismatched Origin header (CSRF protection)", async () => {
const res = await fetch(`${baseUrl}/actions.rsc`, {
method: "POST",
headers: {
"x-rsc-action": "fake-action-id",
Origin: "https://evil.com",
Host: new URL(baseUrl).host,
},
});
expect(res.status).toBe(403);
const text = await res.text();
expect(text).toBe("Forbidden");
});
it("rejects server action POST with invalid Origin header (CSRF protection)", async () => {
const res = await fetch(`${baseUrl}/actions.rsc`, {
method: "POST",
headers: {
"x-rsc-action": "fake-action-id",
Origin: "not-a-url",
Host: new URL(baseUrl).host,
},
});
expect(res.status).toBe(403);
});
it("allows server action POST with matching Origin header", async () => {
// Ported from Next.js: test/e2e/app-dir/no-server-actions/no-server-actions.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/no-server-actions/no-server-actions.test.ts
const res = await fetch(`${baseUrl}/actions.rsc`, {
method: "POST",
headers: {
"x-rsc-action": "nonexistent-action",
Origin: baseUrl,
Host: new URL(baseUrl).host,
"Content-Type": "text/plain",
},
body: "[]",
});
expect(res.status).toBe(404);
expect(res.headers.get("x-nextjs-action-not-found")).toBe("1");
expect(await res.text()).toBe("Server action not found.");
});
it("allows server action POST without Origin header (non-fetch navigation)", async () => {
// Requests without an Origin header should be allowed through.
const res = await fetch(`${baseUrl}/actions.rsc`, {
method: "POST",
headers: {
"x-rsc-action": "nonexistent-action",
"Content-Type": "text/plain",
},
body: "[]",
});
expect(res.status).toBe(404);
expect(res.headers.get("x-nextjs-action-not-found")).toBe("1");
});
it("rejects cyclic multipart server action payloads before decodeReply", async () => {
const body = new FormData();
body.set("0", '["$Q0"]');
const res = await fetch(`${baseUrl}/actions.rsc`, {
method: "POST",
headers: {
"x-rsc-action": "nonexistent-action",
Origin: baseUrl,
Host: new URL(baseUrl).host,
},
body,
signal: AbortSignal.timeout(5_000),
});
expect(res.status).toBe(400);
expect(await res.text()).toBe("Invalid server action payload");
});
it("blocks server action POST with Origin 'null' (CSRF via sandboxed context)", async () => {
const res = await fetch(`${baseUrl}/actions.rsc`, {
method: "POST",
headers: {
"x-rsc-action": "nonexistent-action",
Origin: "null",
"Content-Type": "text/plain",
},
body: "[]",
});
// Origin "null" is sent by browsers in opaque/sandboxed contexts.
// Must be blocked unless explicitly allowlisted (CVE: GHSA-mq59-m269-xvcx).
expect(res.status).toBe(403);
});
it("rejects server action POST when X-Forwarded-Host matches spoofed Origin", async () => {
// Sending both Origin: evil.com and X-Forwarded-Host: evil.com should
// still be rejected. The origin check must only use the Host header,
// not X-Forwarded-Host.
const res = await fetch(`${baseUrl}/actions.rsc`, {
method: "POST",
headers: {
"x-rsc-action": "fake-action-id",
Origin: "https://evil.com",
Host: new URL(baseUrl).host,
"X-Forwarded-Host": "evil.com",
},
});
expect(res.status).toBe(403);
const text = await res.text();
expect(text).toBe("Forbidden");
});
// ── Cross-origin request protection (all App Router requests) ───────
it("blocks page GET with cross-origin Origin header", async () => {
const res = await fetch(`${baseUrl}/`, {
headers: {
Origin: "https://evil.com",
Host: new URL(baseUrl).host,
},
});
expect(res.status).toBe(403);
const text = await res.text();
expect(text).toBe("Forbidden");
});
it("blocks RSC stream requests with cross-origin Origin header", async () => {
const res = await fetch(`${baseUrl}/about.rsc`, {
headers: {
Origin: "https://evil.com",
Host: new URL(baseUrl).host,
Accept: "text/x-component",
RSC: "1",
},
});
expect(res.status).toBe(403);
});
it("blocks requests with cross-site Sec-Fetch headers", async () => {
// Node.js fetch overrides Sec-Fetch-* headers (they're forbidden headers
// in the Fetch spec). Use raw HTTP to simulate browser behavior.
const http = await import("node:http");
const url = new URL(baseUrl);
const status = await new Promise<number>((resolve, reject) => {
const req = http.request(
{
hostname: url.hostname,
port: url.port,
path: "/",
method: "GET",
headers: {
"sec-fetch-site": "cross-site",
"sec-fetch-mode": "no-cors",
},
},
(res) => resolve(res.statusCode ?? 0),
);
req.on("error", reject);
req.end();
});
expect(status).toBe(403);
});
it("allows page requests from localhost origin", async () => {
const res = await fetch(`${baseUrl}/`, {
headers: {
Origin: baseUrl,
Host: new URL(baseUrl).host,
},
});
expect(res.status).toBe(200);
});
it("allows page requests without Origin header", async () => {
const res = await fetch(`${baseUrl}/`);
expect(res.status).toBe(200);
});
});
describe("App Router dev server origin check", () => {
let server: ViteDevServer;
let baseUrl: string;
beforeAll(async () => {
({ server, baseUrl } = await startFixtureServer(APP_FIXTURE_DIR, { appRouter: true }));
}, 30000);
afterAll(async () => {
await server?.close();
});
it("allows requests with no Origin header (direct navigation)", async () => {
const res = await fetch(`${baseUrl}/`);
expect(res.status).toBe(200);
});
it("allows same-origin requests", async () => {
const res = await fetch(`${baseUrl}/`, {
headers: { Origin: baseUrl },
});
expect(res.status).toBe(200);
});
it("blocks requests with Origin 'null' (CSRF via sandboxed context)", async () => {
const res = await fetch(`${baseUrl}/`, {
headers: { Origin: "null" },
});
// Origin "null" must be blocked unless explicitly allowlisted (CVE: GHSA-jcc7-9wpm-mj36).
expect(res.status).toBe(403);
});
it("blocks cross-origin requests", async () => {
const res = await fetch(`${baseUrl}/`, {
headers: { Origin: "http://evil.com" },
});
expect(res.status).toBe(403);
});
it("blocks cross-origin requests to internal Vite paths (/@*)", async () => {
const res = await fetch(`${baseUrl}/@fs/etc/passwd`, {
headers: { Origin: "http://evil.com" },
});
expect(res.status).toBe(403);
});
it("blocks requests with Sec-Fetch-Site: cross-site and no-cors mode", async () => {
// Node.js fetch strips Sec-Fetch-* headers (they're forbidden headers
// in the Fetch spec). Use raw HTTP to simulate browser behavior.
const http = await import("node:http");
const url = new URL(baseUrl);
const status = await new Promise<number>((resolve, reject) => {
const req = http.request(
{
hostname: url.hostname,
port: url.port,
path: "/",
method: "GET",
headers: {
"sec-fetch-site": "cross-site",
"sec-fetch-mode": "no-cors",
},
},
(res) => resolve(res.statusCode ?? 0),
);
req.on("error", reject);
req.end();
});
expect(status).toBe(403);
});
it("blocks cross-origin requests to source files", async () => {
const res = await fetch(`${baseUrl}/app/page.tsx`, {
headers: { Origin: "http://evil.com" },
});
expect(res.status).toBe(403);
});
it("blocks requests with malformed Origin header", async () => {
const res = await fetch(`${baseUrl}/`, {
headers: { Origin: "not-a-url" },
});
expect(res.status).toBe(403);
});
});
describe("App Router Production build", () => {
const outDir = path.resolve(APP_FIXTURE_DIR, "dist");
afterAll(() => {
fs.rmSync(outDir, { recursive: true, force: true });
});
it("produces RSC/SSR/client bundles via vite build", async () => {
const builder = await createBuilder({
root: APP_FIXTURE_DIR,
configFile: false,
plugins: [vinext({ appDir: APP_FIXTURE_DIR })],
logLevel: "silent",
});
await builder.buildApp();
// RSC entry should exist (at dist/server/index.js)
expect(fs.existsSync(path.join(outDir, "server", "index.js"))).toBe(true);
// SSR entry should exist (at dist/server/ssr/index.js)
expect(fs.existsSync(path.join(outDir, "server", "ssr", "index.js"))).toBe(true);
// Client bundle should exist
expect(fs.existsSync(path.join(outDir, "client"))).toBe(true);
// Client should have hashed JS assets
const clientAssets = fs.readdirSync(path.join(outDir, "client", "assets"));
expect(clientAssets.some((f: string) => f.endsWith(".js"))).toBe(true);
// RSC bundle should contain route handling code
const rscEntry = fs.readFileSync(path.join(outDir, "server", "index.js"), "utf-8");
expect(rscEntry).toContain("handler");
// Asset manifest should be generated
expect(fs.existsSync(path.join(outDir, "server", "__vite_rsc_assets_manifest.js"))).toBe(true);
}, 30000);
it("serves production build via preview server", async () => {
const { preview } = await import("vite");
const previewServer = await preview({
root: APP_FIXTURE_DIR,
configFile: false,
plugins: [vinext({ appDir: APP_FIXTURE_DIR })],
preview: { port: 0 },
logLevel: "silent",
});
const addr = previewServer.httpServer.address();
const previewUrl = addr && typeof addr === "object" ? `http://localhost:${addr.port}` : null;
expect(previewUrl).not.toBeNull();
try {
// Home page renders SSR HTML
const homeRes = await fetch(`${previewUrl}/`);
expect(homeRes.status).toBe(200);
const homeHtml = await homeRes.text();
expect(homeHtml).toContain("Welcome to App Router");
expect(homeHtml).toContain("<script");
// Production bootstrap is emitted as a real <script type="module" src=…>
// tag (via React's bootstrapModules option) referencing hashed assets.
expect(homeHtml).toMatch(/<script[^>]+type="module"[^>]+src="\/assets\/[^"]+\.js"/);
// Dynamic route works
const blogRes = await fetch(`${previewUrl}/blog/test-post`);
expect(blogRes.status).toBe(200);
const blogHtml = await blogRes.text();
expect(blogHtml).toContain("Blog Post");
expect(blogHtml).toContain("test-post");
// Nested layout works
const dashRes = await fetch(`${previewUrl}/dashboard`);
expect(dashRes.status).toBe(200);
const dashHtml = await dashRes.text();
expect(dashHtml).toContain("Dashboard");
expect(dashHtml).toContain("dashboard-layout");
// 404 for nonexistent routes
const notFoundRes = await fetch(`${previewUrl}/no-such-page`);
expect(notFoundRes.status).toBe(404);
// RSC endpoint works
const rscRes = await fetch(`${previewUrl}/about.rsc`);
expect(rscRes.status).toBe(200);
expect(rscRes.headers.get("content-type")).toContain("text/x-component");
} finally {
previewServer.httpServer.close();
}
}, 30000);
});
describe("App Router Production server (startProdServer)", () => {
const outDir = path.resolve(APP_FIXTURE_DIR, "dist");
let server: import("node:http").Server | undefined;
let baseUrl: string;
function extractRequestId(html: string): string | undefined {
return (
html.match(
/data-testid="request-id"[^>]*>(?:<!--.*?-->)*RequestID:\s*(?:<!--.*?-->)*([a-z0-9]+)/,
)?.[1] ?? html.match(/request-id[^>]*>[^<]*?([a-z0-9]{6,})/)?.[1]
);
}
beforeAll(async () => {
// Build the app-basic fixture to the default dist/ directory
const builder = await createBuilder({
root: APP_FIXTURE_DIR,
configFile: false,
plugins: [vinext({ appDir: APP_FIXTURE_DIR })],
logLevel: "silent",
});
await builder.buildApp();
// Start the production server on a random available port
const { startProdServer } = await import("../packages/vinext/src/server/prod-server.js");
({ server } = await startProdServer({ port: 0, outDir, noCompression: false }));
const addr = server!.address();
const port = typeof addr === "object" && addr ? addr.port : 4210;
baseUrl = `http://localhost:${port}`;
}, 60000);
afterAll(() => {
server?.close();
fs.rmSync(outDir, { recursive: true, force: true });
});
it("serves the home page with SSR HTML", async () => {
const res = await fetch(`${baseUrl}/`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/html");
const html = await res.text();
expect(html).toContain("Welcome to App Router");
expect(html).toContain("<script");
});
it("does not reuse cached HTML across requests with different CSP nonces", async () => {
const firstRes = await fetch(`${baseUrl}/revalidate-test?csp-nonce=first`);
expect(firstRes.status).toBe(200);
expect(firstRes.headers.get("cache-control")).toBe("no-store, must-revalidate");
expect(firstRes.headers.get("content-security-policy")).toBe(
"script-src 'nonce-first' 'strict-dynamic';",
);
const firstHtml = await firstRes.text();
expect(firstHtml).toContain('<script nonce="first">self.__VINEXT_RSC_PARAMS__={}</script>');
const secondRes = await fetch(`${baseUrl}/revalidate-test?csp-nonce=second`);
expect(secondRes.status).toBe(200);
expect(secondRes.headers.get("cache-control")).toBe("no-store, must-revalidate");
expect(secondRes.headers.get("content-security-policy")).toBe(
"script-src 'nonce-second' 'strict-dynamic';",
);
const secondHtml = await secondRes.text();
expect(secondHtml).toContain('<script nonce="second">self.__VINEXT_RSC_PARAMS__={}</script>');
expect(secondHtml).not.toContain('nonce="first"');
});
it("does not collapse encoded slashes onto nested routes in production", async () => {
const encodedRes = await fetch(`${baseUrl}/headers%2Foverride-from-middleware`);
expect(encodedRes.status).toBe(404);
expect(encodedRes.headers.get("e2e-headers")).not.toBe("middleware");
const nestedRes = await fetch(`${baseUrl}/headers/override-from-middleware`);
expect(nestedRes.status).toBe(200);
expect(nestedRes.headers.get("e2e-headers")).toBe("middleware");
});
it("applies middleware request header overrides before App->Pages fallback rendering in production", async () => {
const res = await fetch(`${baseUrl}/pages-header-override-delete`, {
headers: {
authorization: "Bearer secret",
cookie: "a=1; b=2",
},
});
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Pages Header Override Delete");
expect(html).toContain('<p id="authorization"></p>');
expect(html).toContain('<p id="cookie"></p>');
expect(html).toContain('id="middleware-header">hello-from-middleware<');
expect(html).toContain('"authorization":null');
expect(html).toContain('"cookie":null');
});
it("serves dynamic routes", async () => {
const res = await fetch(`${baseUrl}/blog/test-post`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("test-post");
});
it("serves nested layouts", async () => {
const res = await fetch(`${baseUrl}/dashboard`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("dashboard-layout");
});
it("returns RSC stream for .rsc requests", async () => {
const res = await fetch(`${baseUrl}/about.rsc`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/x-component");
});
it("returns HTML for header-only RSC requests at canonical page URLs", async () => {
const res = await fetch(`${baseUrl}/about`, {
headers: { Accept: "text/x-component", RSC: "1" },
});
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/html");
});
it("serves route handlers (GET /api/hello)", async () => {
const res = await fetch(`${baseUrl}/api/hello`);
expect(res.status).toBe(200);
const json = await res.json();
expect(json).toHaveProperty("message");
});
it("returns 404 for nonexistent routes", async () => {
const res = await fetch(`${baseUrl}/no-such-page`);
expect(res.status).toBe(404);
});
it("serves static assets with cache headers", async () => {
// Find an actual hashed asset from the build
const assetsDir = path.join(outDir, "client", "assets");
const assets = fs.readdirSync(assetsDir);
const jsFile = assets.find((f: string) => f.endsWith(".js"));
expect(jsFile).toBeDefined();
const res = await fetch(`${baseUrl}/assets/${jsFile}`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("javascript");
expect(res.headers.get("cache-control")).toContain("immutable");
});
it("serves public files from the build output", async () => {
// Ported from Next.js: test/production/export/index.test.ts
// https://github.com/vercel/next.js/blob/canary/test/production/export/index.test.ts
const res = await fetch(`${baseUrl}/logo/logo.svg`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("image/svg+xml");
expect(await res.text()).toContain("vinext");
});
it("serves public files under basePath and 404s without it", async () => {
// Ported from Next.js: test/e2e/basepath/basepath.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/basepath/basepath.test.ts
const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "vinext-app-public-basepath-"));
const fixtureRoot = path.join(tmpDir, "fixture");
let basePathServer: import("node:http").Server | undefined;
try {
fs.cpSync(APP_FIXTURE_DIR, fixtureRoot, { recursive: true });
const fixtureNodeModules = path.join(fixtureRoot, "node_modules");
if (!fs.existsSync(fixtureNodeModules)) {
fs.symlinkSync(
path.resolve(__dirname, "..", "node_modules"),
fixtureNodeModules,
"junction",
);
}
const nextConfigPath = path.join(fixtureRoot, "next.config.ts");
const nextConfig = fs.readFileSync(nextConfigPath, "utf-8");
fs.writeFileSync(
nextConfigPath,
nextConfig.replace(
"const nextConfig: NextConfig = {",
'const nextConfig: NextConfig = {\n basePath: "/app",',
),
);
const builder = await createBuilder({
root: fixtureRoot,
configFile: false,
plugins: [vinext({ appDir: fixtureRoot })],
logLevel: "silent",
});
await builder.buildApp();
const { startProdServer } = await import("../packages/vinext/src/server/prod-server.js");
({ server: basePathServer } = await startProdServer({
port: 0,
outDir: path.join(fixtureRoot, "dist"),
noCompression: true,
}));
const addr = basePathServer.address();
const port = typeof addr === "object" && addr ? addr.port : 0;
const tmpBaseUrl = `http://localhost:${port}`;
const withBasePathRes = await fetch(`${tmpBaseUrl}/app/logo/logo.svg`);
expect(withBasePathRes.status).toBe(200);
expect(withBasePathRes.headers.get("content-type")).toContain("image/svg+xml");
const withoutBasePathRes = await fetch(`${tmpBaseUrl}/logo/logo.svg`);
expect(withoutBasePathRes.status).toBe(404);
} finally {
basePathServer?.close();
fs.rmSync(tmpDir, { recursive: true, force: true });
}
});
it("supports gzip compression for HTML", async () => {
const res = await fetch(`${baseUrl}/`, {
headers: { "Accept-Encoding": "gzip" },
});
expect(res.status).toBe(200);
// Node.js fetch auto-decompresses, but we can check the header
// was set by looking at the original response headers
expect(res.headers.get("content-encoding")).toBe("gzip");
});
it("supports brotli compression for HTML", async () => {
const res = await fetch(`${baseUrl}/`, {
headers: { "Accept-Encoding": "br" },
});
expect(res.status).toBe(200);
expect(res.headers.get("content-encoding")).toBe("br");
});
it("streams HTML (response is a ReadableStream)", async () => {
const res = await fetch(`${baseUrl}/`);
expect(res.status).toBe(200);
// Verify we can read the body as text (proves streaming works)
const html = await res.text();
expect(html.length).toBeGreaterThan(0);
});
it("reports server component render errors via instrumentation in production", async () => {
const resetRes = await fetch(`${baseUrl}/api/instrumentation-test`, {
method: "DELETE",
});
expect(resetRes.status).toBe(200);
const errorRes = await fetch(`${baseUrl}/error-server-test`);
expect(errorRes.status).toBe(200);
await new Promise((resolve) => setTimeout(resolve, 200));
const stateRes = await fetch(`${baseUrl}/api/instrumentation-test`);
expect(stateRes.status).toBe(200);
const state = await stateRes.json();
expect(state.errors.length).toBeGreaterThanOrEqual(1);
const err = state.errors[state.errors.length - 1];
expect(err.message).toBe("Server component error");
expect(err.path).toBe("/error-server-test");
expect(err.method).toBe("GET");
expect(err.routerKind).toBe("App Router");
expect(err.routePath).toBe("/error-server-test");
expect(err.routeType).toBe("render");
});
it("returns 400 for malformed percent-encoded path (not crash)", async () => {
const res = await fetch(`${baseUrl}/%E0%A4%A`);
expect(res.status).toBe(400);
const body = await res.text();
expect(body).toContain("Bad Request");
});
it("returns 400 for bare percent sign in path (not crash)", async () => {
const res = await fetch(`${baseUrl}/%`);
expect(res.status).toBe(400);
const body = await res.text();
expect(body).toContain("Bad Request");
});
it("revalidateTag invalidates App Router ISR page entries by fetch tag", async () => {
const res1 = await fetch(`${baseUrl}/revalidate-tag-test`);
expect(res1.status).toBe(200);
const html1 = await res1.text();
const reqId1 = extractRequestId(html1);
expect(reqId1).toBeTruthy();
const res2 = await fetch(`${baseUrl}/revalidate-tag-test`);
expect(res2.status).toBe(200);
const html2 = await res2.text();
const reqId2 = extractRequestId(html2);
expect(reqId2).toBe(reqId1);
expect(res2.headers.get("x-vinext-cache")).toBe("HIT");
const tagRes = await fetch(`${baseUrl}/api/revalidate-tag`);
expect(tagRes.status).toBe(200);
expect(await tagRes.text()).toBe("ok");
const res3 = await fetch(`${baseUrl}/revalidate-tag-test`);
expect(res3.status).toBe(200);
const html3 = await res3.text();
const reqId3 = extractRequestId(html3);
expect(reqId3).toBeTruthy();
expect(reqId3).not.toBe(reqId1);
expect(res3.headers.get("x-vinext-cache")).toBe("MISS");
});
it("revalidatePath invalidates App Router ISR page entries by path tag", async () => {
const res1 = await fetch(`${baseUrl}/revalidate-tag-test`);
expect(res1.status).toBe(200);
const html1 = await res1.text();
const reqId1 = extractRequestId(html1);
expect(reqId1).toBeTruthy();
const res2 = await fetch(`${baseUrl}/revalidate-tag-test`);
expect(res2.status).toBe(200);
const html2 = await res2.text();
const reqId2 = extractRequestId(html2);
expect(reqId2).toBe(reqId1);
expect(res2.headers.get("x-vinext-cache")).toBe("HIT");
const pathRes = await fetch(`${baseUrl}/api/revalidate-path`);
expect(pathRes.status).toBe(200);
expect(await pathRes.text()).toBe("ok");
const res3 = await fetch(`${baseUrl}/revalidate-tag-test`);
expect(res3.status).toBe(200);
const html3 = await res3.text();
const reqId3 = extractRequestId(html3);
expect(reqId3).toBeTruthy();
expect(reqId3).not.toBe(reqId1);
expect(res3.headers.get("x-vinext-cache")).toBe("MISS");
});
it("dedupes identical no-store fetches across metadata and page render during ISR background regeneration", async () => {
await withCountingFetchTarget(async (targetUrl, getRequestCount) => {
process.env.TEST_FETCH_DEDUPE_TARGET = targetUrl;
try {
const warmRes = await fetch(`${baseUrl}/fetch-dedupe-isr-metadata`);
expect(warmRes.status).toBe(200);
expect(await warmRes.text()).toContain("<title>ISR Product 1</title>");
expect(getRequestCount()).toBe(1);
await new Promise((resolve) => setTimeout(resolve, 1500));
const staleRes = await fetch(`${baseUrl}/fetch-dedupe-isr-metadata`);
expect(staleRes.status).toBe(200);
await staleRes.arrayBuffer();
await waitForCondition(() => getRequestCount() > 1, {
intervalMs: 100,
timeoutMs: 3000,
});
// Poll for count stabilization rather than assuming a fixed window —
// a stray third fetch would betray dedupe leaking across the
// metadata + page boundary in background regeneration.
let stableCount = getRequestCount();
let stableSince = Date.now();
while (Date.now() - stableSince < 500) {
await new Promise((resolve) => setTimeout(resolve, 50));
const current = getRequestCount();
if (current !== stableCount) {
stableCount = current;
stableSince = Date.now();
}
}
expect(stableCount).toBe(2);
} finally {
delete process.env.TEST_FETCH_DEDUPE_TARGET;
}
});
});
it("page ISR + searchParams: RSC requests stay dynamic instead of serving cached query data", async () => {
const res1 = await fetch(`${baseUrl}/isr-dynamic-search.rsc?filter=crimson`, {
headers: { Accept: "text/x-component", RSC: "1" },
});
expect(res1.status).toBe(200);
expect(res1.headers.get("content-type")).toContain("text/x-component");
expect(res1.headers.get("x-vinext-cache")).toBeNull();
const rsc1 = await res1.text();
expect(rsc1).toContain("crimson");
const res2 = await fetch(`${baseUrl}/isr-dynamic-search.rsc?filter=indigo`, {
headers: { Accept: "text/x-component", RSC: "1" },
});
expect(res2.status).toBe(200);
expect(res2.headers.get("x-vinext-cache")).toBeNull();
const rsc2 = await res2.text();
expect(rsc2).toContain("indigo");
expect(rsc2).not.toContain("crimson");
});
it("page ISR + searchParams: HTML requests also skip ISR caching", async () => {
const res1 = await fetch(`${baseUrl}/isr-dynamic-search?filter=alpha`);
expect(res1.status).toBe(200);
expect(res1.headers.get("x-vinext-cache")).toBeNull();
const html1 = await res1.text();
expect(html1).toContain("alpha");
const res2 = await fetch(`${baseUrl}/isr-dynamic-search?filter=beta`);
expect(res2.status).toBe(200);
expect(res2.headers.get("x-vinext-cache")).toBeNull();
const html2 = await res2.text();
expect(html2).toContain("beta");
expect(html2).not.toContain('"filter">alpha<');
});
// Route handler ISR caching tests
// These tests are ORDER-DEPENDENT: they share a single production server and
// /api/static-data cache state persists across tests. HIT depends on MISS
// having run first, STALE re-warms explicitly. Take care when adding new tests.
// Fixture: /api/static-data exports revalidate = 1 and returns { timestamp: Date.now() }
it("route handler ISR: first GET returns MISS", async () => {
const res = await fetch(`${baseUrl}/api/static-data`);
expect(res.status).toBe(200);
expect(res.headers.get("x-vinext-cache")).toBe("MISS");
});
it("route handler ISR: second GET returns cached response (HIT)", async () => {
// First request populates cache
const res1 = await fetch(`${baseUrl}/api/static-data`);
const body1 = await res1.json();
expect(res1.status).toBe(200);
// Second request should be a cache hit with identical response
const res2 = await fetch(`${baseUrl}/api/static-data`);
const body2 = await res2.json();
expect(res2.status).toBe(200);
expect(body2.timestamp).toBe(body1.timestamp);
expect(res2.headers.get("x-vinext-cache")).toBe("HIT");
});
it("route handler ISR: POST bypasses cache", async () => {
// POST should never be cached even with revalidate set on GET
const res = await fetch(`${baseUrl}/api/static-data`, { method: "POST" });
// /api/static-data only exports GET, POST should be 405
expect(res.status).toBe(405);
expect(res.headers.get("x-vinext-cache")).toBeNull();
});
it("route handler ISR: dynamic handler (reads headers()) is not cached", async () => {
// /api/dynamic-request-data exports revalidate=60 but reads headers() and cookies()
const res1 = await fetch(`${baseUrl}/api/dynamic-request-data`, {
headers: { "x-test-ping": "a" },
});
const res2 = await fetch(`${baseUrl}/api/dynamic-request-data`, {
headers: { "x-test-ping": "b" },
});
// Dynamic usage should prevent ISR caching
expect(res1.headers.get("x-vinext-cache")).toBeNull();
expect(res2.headers.get("x-vinext-cache")).toBeNull();
});
it("route handler ISR: direct request.headers access is not cached", async () => {
const res1 = await fetch(`${baseUrl}/api/dynamic-request-headers`, {
headers: { "x-test-ping": "a" },
});
const res2 = await fetch(`${baseUrl}/api/dynamic-request-headers`, {
headers: { "x-test-ping": "b" },
});
expect(await res1.json()).toEqual({ ping: "a" });
expect(await res2.json()).toEqual({ ping: "b" });
expect(res1.headers.get("x-vinext-cache")).toBeNull();
expect(res2.headers.get("x-vinext-cache")).toBeNull();
});
it("route handler ISR: request.url query access is not cached", async () => {
const res1 = await fetch(`${baseUrl}/api/dynamic-request-url?ping=a`);
const res2 = await fetch(`${baseUrl}/api/dynamic-request-url?ping=b`);
expect(await res1.json()).toEqual({ ping: "a" });
expect(await res2.json()).toEqual({ ping: "b" });
expect(res1.headers.get("x-vinext-cache")).toBeNull();
expect(res2.headers.get("x-vinext-cache")).toBeNull();
});
it("route handler ISR: handler-set Cache-Control skips ISR caching", async () => {
// /api/custom-cache exports revalidate=60 but sets its own Cache-Control
const res1 = await fetch(`${baseUrl}/api/custom-cache`);
const res2 = await fetch(`${baseUrl}/api/custom-cache`);
// Handler controls caching — ISR should not interfere
expect(res1.headers.get("x-vinext-cache")).toBeNull();
expect(res2.headers.get("x-vinext-cache")).toBeNull();
});
it("route handler ISR: force-dynamic handler is not cached", async () => {
// /api/force-dynamic-revalidate exports revalidate=60 AND dynamic="force-dynamic"
const res1 = await fetch(`${baseUrl}/api/force-dynamic-revalidate`);
const res2 = await fetch(`${baseUrl}/api/force-dynamic-revalidate`);
expect(res1.headers.get("x-vinext-cache")).toBeNull();
expect(res2.headers.get("x-vinext-cache")).toBeNull();
});
it("route handler ISR: STALE serves stale data and triggers background regen", async () => {
// /api/static-data has revalidate=1
// Cache may already be warm from earlier tests — ensure we have a known timestamp
const warm = await fetch(`${baseUrl}/api/static-data`);
const warmBody = await warm.json();
const cachedTimestamp = warmBody.timestamp;
// Wait for cache entry to become stale (revalidate=1, generous margin for slow CI)
await new Promise((resolve) => setTimeout(resolve, 2000));
// STALE — serves stale data, triggers background regen.
// The stale response must return quickly: it must NOT block on the
// background regeneration. Measure total duration to catch regressions.
const staleStart = Date.now();
const staleRes = await fetch(`${baseUrl}/api/static-data`);
const staleDuration = Date.now() - staleStart;
expect(staleRes.headers.get("x-vinext-cache")).toBe("STALE");
const staleBody = await staleRes.json();
expect(staleBody.timestamp).toBe(cachedTimestamp); // Still the old data
// The stale response must arrive promptly; background regen runs
// out-of-band via ctx.waitUntil(). Allow 500ms for cold-start latency.
expect(staleDuration).toBeLessThan(500);
// Poll until background regen completes (up to 5s)
const deadline = Date.now() + 5000;
let freshRes: Response;
let freshBody: { timestamp: number };
do {
await new Promise((resolve) => setTimeout(resolve, 500));
freshRes = await fetch(`${baseUrl}/api/static-data`);
freshBody = await freshRes.json();
} while (freshRes.headers.get("x-vinext-cache") !== "HIT" && Date.now() < deadline);
// HIT — fresh data from background regen
expect(freshRes.headers.get("x-vinext-cache")).toBe("HIT");
expect(freshBody.timestamp).not.toBe(cachedTimestamp); // New data
});
// Test pattern ported from Next.js:
// test/e2e/app-dir/use-cache-swr/use-cache-swr.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/use-cache-swr/use-cache-swr.test.ts
// (adapted from "use cache" SWR to route handler ISR with export const revalidate)
it("route handler ISR: STALE completes quickly without blocking on background regen", async () => {
// /api/slow-isr has revalidate=1 and a 1s handler delay.
// Populate the cache (cold request, takes ~1s).
const coldStart = Date.now();
const cold = await fetch(`${baseUrl}/api/slow-isr`);
expect(cold.status).toBe(200);
const coldBody = await cold.json();
const coldDuration = Date.now() - coldStart;
expect(coldDuration).toBeGreaterThanOrEqual(700); // roughly 1s handler delay
// Wait for the 1s revalidate window to expire.
await new Promise((resolve) => setTimeout(resolve, 1500));
// Stale request: must return the cached value quickly (< 500ms), not
// the full 1s handler duration. If the response is blocked on background
// regeneration, this will take ≥ 1s and fail.
const staleStart = Date.now();
const stale = await fetch(`${baseUrl}/api/slow-isr`);
const staleDuration = Date.now() - staleStart;
expect(stale.headers.get("x-vinext-cache")).toBe("STALE");
const staleBody = await stale.json();
expect(staleBody.timestamp).toBe(coldBody.timestamp); // Still the old data
expect(staleDuration).toBeLessThan(500);
// Wait for background regen to complete, then verify fresh data.
const deadline = Date.now() + 5000;
let freshRes: Response;
let freshBody: { timestamp: number };
do {
await new Promise((resolve) => setTimeout(resolve, 500));
freshRes = await fetch(`${baseUrl}/api/slow-isr`);
freshBody = await freshRes.json();
} while (freshRes.headers.get("x-vinext-cache") !== "HIT" && Date.now() < deadline);
expect(freshRes.headers.get("x-vinext-cache")).toBe("HIT");
expect(freshBody.timestamp).not.toBe(coldBody.timestamp);
});
it("route handler ISR: auto-HEAD returns cached headers with empty body", async () => {
// Ensure cache is warm
const getRes = await fetch(`${baseUrl}/api/static-data`);
await getRes.text();
const cacheHeader = getRes.headers.get("x-vinext-cache");
expect(cacheHeader === "MISS" || cacheHeader === "HIT" || cacheHeader === "STALE").toBe(true);
// HEAD against a GET-only route should return cached headers, no body
const headRes = await fetch(`${baseUrl}/api/static-data`, { method: "HEAD" });
expect(headRes.status).toBe(200);
expect(headRes.headers.get("x-vinext-cache")).toBe("HIT");
const body = await headRes.text();
expect(body).toBe("");
});
it("middleware request header overrides still apply after middleware calls headers() first", async () => {
// Regression for a bug where a middleware that reads `next/headers` →
// `headers()` *before* returning `NextResponse.next({ request: { headers } })`
// leaked the pre-override snapshot into the Server Component.
//
// The `headers()` call cached the sealed read-only Headers view on the
// shared HeadersContext (`ctx.readonlyHeaders = _sealHeaders(ctx.headers)`).
// `applyMiddlewareRequestHeaders()` then replaced `ctx.headers` with the
// override view but did not invalidate the cached sealed snapshot, so the
// Server Component's subsequent `headers()` call returned the original
// pre-override request headers.
//
// Discovered with @clerk/nextjs, whose `clerkClient()` calls
// `await headers()` via its internal `buildRequestLike()` helper during
// middleware execution. Clerk's `auth()` in a Server Component then threw
//
// "auth() was called but Clerk can't detect usage of clerkMiddleware()"
//
// because Clerk's own x-clerk-auth-* request header overrides never
// reached the render. The fixture middleware reproduces the same prime-
// then-override sequence without a Clerk dependency by calling
// `await headers()` first and then returning the override response.
//
// The test runs against the production server (startProdServer) because
// the bug only manifests on the inline RSC entry path that wraps the
// entire request — including middleware execution — in the headers
// context. The dev-mode middleware path runs middleware before the
// headers context exists, so calling `headers()` from middleware is
// instead an immediate error there.
const res = await fetch(`${baseUrl}/header-override-after-prior-access`, {
headers: {
authorization: "Bearer secret",
cookie: "a=1; b=2",
},
});
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain('id="authorization">null<');
expect(html).toContain('id="cookie">null<');
expect(html).toContain('id="middleware-header">hello-from-middleware<');
expect(html).toContain('id="cookie-count">0<');
});
});
describe("App Router Production server worker entry compatibility", () => {
it("accepts Worker-style default exports from dist/server/index.js", async () => {
const outDir = fs.mkdtempSync(path.join(os.tmpdir(), "vinext-prod-worker-entry-"));
const serverDir = path.join(outDir, "server");
fs.mkdirSync(serverDir, { recursive: true });
fs.mkdirSync(path.join(outDir, "client"), { recursive: true });
fs.writeFileSync(path.join(outDir, "package.json"), JSON.stringify({ type: "module" }));
fs.writeFileSync(
path.join(serverDir, "index.js"),
`
export default {
async fetch(request, _env, ctx) {
ctx?.waitUntil(Promise.resolve("background"));
return new Response(
JSON.stringify({
pathname: new URL(request.url).pathname,
hasWaitUntil: typeof ctx?.waitUntil === "function",
}),
{ headers: { "content-type": "application/json" } },
);
},
};
`,
);
const { startProdServer } = await import("../packages/vinext/src/server/prod-server.js");
const { server } = await startProdServer({ port: 0, outDir, noCompression: true });
const addr = server.address();
const port = typeof addr === "object" && addr ? addr.port : 0;
try {
const res = await fetch(`http://localhost:${port}/worker-test`);
expect(res.status).toBe(200);
expect(await res.json()).toEqual({
pathname: "/worker-test",
hasWaitUntil: true,
});
} finally {
server.close();
fs.rmSync(outDir, { recursive: true, force: true });
}
});
it("reports a clear error for unsupported app router entry shapes", async () => {
const outDir = fs.mkdtempSync(path.join(os.tmpdir(), "vinext-prod-worker-invalid-"));
const serverDir = path.join(outDir, "server");
fs.mkdirSync(serverDir, { recursive: true });
fs.writeFileSync(path.join(outDir, "package.json"), JSON.stringify({ type: "module" }));
fs.writeFileSync(path.join(serverDir, "index.js"), "export default {};\n");
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
const exitSpy = vi.spyOn(process, "exit").mockImplementation(((
code?: string | number | null,
) => {
throw new Error(`process.exit(${code})`);
}) as never);
try {
const { startProdServer } = await import("../packages/vinext/src/server/prod-server.js");
await expect(startProdServer({ port: 0, outDir, noCompression: true })).rejects.toThrow(
"process.exit(1)",
);
expect(errorSpy).toHaveBeenCalledWith(
"[vinext] App Router entry must export either a default handler function or a Worker-style default export with fetch()",
);
} finally {
errorSpy.mockRestore();
exitSpy.mockRestore();
fs.rmSync(outDir, { recursive: true, force: true });
}
});
});
describe("App Router Production server self-hosted next/font/google headers", () => {
// Regression for a bug where vinext's `next/font/google` self-hosting
// pipeline emitted the dev-machine absolute filesystem path into the
// HTTP `Link:` response header, the HTML body's `<link rel="preload">`
// tags, and the `<style data-vinext-fonts>` `@font-face src: url(...)`
// block. `fetchAndCacheFont` in `packages/vinext/src/plugins/fonts.ts`
// downloaded Google Fonts `.woff2` files into `<root>/.vinext/fonts/`
// and wrote `path.join(fontDir, filename)` — an absolute filesystem
// path — into the cached `@font-face` CSS's `src: url(...)`. The CSS
// was then embedded verbatim as `selfHostedCSS` in the server bundle
// and every downstream consumer (the body preload tags, the Link
// response header, and the injected style block) read the same
// leaked filesystem path. In production this produced high-priority
// 404s (`<origin>/home/user/project/.vinext/fonts/...`) on every
// request and fell back to the real font only via the browser's
// unrelated runtime retry of the stylesheet CDN.
//
// The fix uses a separate fixture (`tests/fixtures/font-google-multiple`)
// rather than `app-basic` because `app-basic` is shared by many other
// tests — adding `next/font/google` to its root layout would force a
// real Google Fonts network fetch into every test run in this file.
// The mocked fetch below stands in for the Google Fonts CDN so the
// build is hermetic.
const FONT_FIXTURE_DIR = path.resolve(import.meta.dirname, "./fixtures/font-google-multiple");
const fontOutDir = path.resolve(FONT_FIXTURE_DIR, "dist");
const fontCacheDir = path.resolve(FONT_FIXTURE_DIR, ".vinext");
const nodeModulesLink = path.join(FONT_FIXTURE_DIR, "node_modules");
let fontServer: import("node:http").Server | undefined;
let fontBaseUrl: string;
beforeAll(async () => {
// Start from a clean slate so the test deterministically exercises
// `fetchAndCacheFont`'s fresh-fetch path and the writeBundle copy.
fs.rmSync(fontOutDir, { recursive: true, force: true });
fs.rmSync(fontCacheDir, { recursive: true, force: true });
// The font fixture has no installed node_modules of its own — mirror
// `font-google-build.test.ts` and symlink the repo-level node_modules
// so `vinext` resolves as a workspace package during the in-process
// build below.
const projectNodeModules = path.resolve(import.meta.dirname, "../node_modules");
fs.rmSync(nodeModulesLink, { recursive: true, force: true });
fs.symlinkSync(projectNodeModules, nodeModulesLink);
// Mock the Google Fonts CDN so the build is hermetic and
// `fetchAndCacheFont` exercises its real URL-rewrite code path
// (which used to bake the filesystem path into the cached CSS).
// The mocked CSS MUST contain `https://fonts.gstatic.com/...` URLs
// so `fetchAndCacheFont`'s regex extracts them and triggers the
// `css.split(fontUrl).join(filePath)` rewrite that was the source
// of the bug. Returning CSS with already-relative URLs would sidestep
// the failure mode.
const originalFetch = globalThis.fetch;
// Normalize every `fetch()` input shape to a plain URL string so the
// mock can match by substring. The build plugin currently always
// passes string URLs, but `globalThis.fetch` accepts `RequestInfo |
// URL` and a future change (or test helper) passing a `Request` or
// `URL` instance would otherwise be coerced to `[object Request]`
// by `String()` and silently skip the mock branches, falling through
// to a real network request for Google Fonts.
const resolveFetchUrl = (input: unknown): string => {
if (typeof input === "string") return input;
if (input instanceof URL) return input.toString();
if (typeof Request !== "undefined" && input instanceof Request) return input.url;
return String(input);
};
// Preserve `globalThis.fetch`'s full `(input, init)` signature so the
// fallback path forwards request options verbatim to the real fetch.
// The build plugin only issues plain GETs for Google Fonts today, so
// the `init` argument is never populated for the mock branches — but
// dropping it from the fallback signature would silently strip
// headers/method/body from any unrelated request that happens to run
// during the test and fall through.
globalThis.fetch = async (input: unknown, init?: RequestInit) => {
const url = resolveFetchUrl(input);
if (url.includes("fonts.googleapis.com")) {
const isMono = url.includes("Geist+Mono") || url.includes("Geist%20Mono");
const family = isMono ? "Geist Mono" : "Geist";
const gstaticUrl = `https://fonts.gstatic.com/s/${isMono ? "geistmono" : "geist"}/v1/${isMono ? "geistmono" : "geist"}-latin.woff2`;
const css = [
"@font-face {",
` font-family: '${family}';`,
" font-style: normal;",
" font-weight: 400;",
" font-display: swap;",
` src: url(${gstaticUrl}) format('woff2');`,
" unicode-range: U+0000-00FF;",
"}",
].join("\n");
return new Response(css, {
status: 200,
headers: { "content-type": "text/css" },
});
}
if (url.includes("fonts.gstatic.com")) {
// 16 bytes is plenty — the plugin writes whatever it gets to disk
// under `.vinext/fonts/<family>/<hash>.woff2`. The test never reads
// the contents back, it only asserts the file exists and serves
// with the right content-type.
return new Response(
new Uint8Array([0x77, 0x4f, 0x46, 0x32, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]),
{ status: 200, headers: { "content-type": "font/woff2" } },
);
}
return originalFetch(input as RequestInfo, init);
};
try {
const builder = await createBuilder({
root: FONT_FIXTURE_DIR,
configFile: false,
plugins: [vinext({ appDir: FONT_FIXTURE_DIR })],
logLevel: "silent",
});
await builder.buildApp();
} finally {
globalThis.fetch = originalFetch;
}
const { startProdServer } = await import("../packages/vinext/src/server/prod-server.js");
({ server: fontServer } = await startProdServer({
port: 0,
outDir: fontOutDir,
noCompression: true,
}));
const addr = fontServer!.address();
const port = typeof addr === "object" && addr ? addr.port : 4212;
fontBaseUrl = `http://localhost:${port}`;
}, 60000);
afterAll(() => {
fontServer?.close();
fs.rmSync(fontOutDir, { recursive: true, force: true });
fs.rmSync(fontCacheDir, { recursive: true, force: true });
fs.rmSync(nodeModulesLink, { recursive: true, force: true });
});
it("emits served URLs in the HTTP Link response header (not filesystem paths)", async () => {
const res = await fetch(`${fontBaseUrl}/`);
expect(res.status).toBe(200);
const link = res.headers.get("link");
expect(link).toBeTruthy();
// Every preload in the Link header must reference the served URL
// namespace created by the fix. Before the fix, the header value was
// `</home/user/project/.vinext/fonts/geist-<hash>/geist-<hash>.woff2>`.
expect(link).toContain("/assets/_vinext_fonts/");
expect(link).toMatch(/rel=preload/);
expect(link).toMatch(/as=font/);
expect(link).toMatch(/type=font\/woff2/);
// Both the absolute dev-machine prefix and the relative cache dir
// name must be absent — the leaked path always contained both.
expect(link).not.toContain(FONT_FIXTURE_DIR);
expect(link).not.toContain(".vinext/fonts");
});
it("emits served URLs in the body <link rel=preload> tags", async () => {
const res = await fetch(`${fontBaseUrl}/`);
const html = await res.text();
expect(html).toMatch(
/<link rel="preload"[^>]*href="\/assets\/_vinext_fonts\/[^"]+\.woff2"[^>]*as="font"/,
);
expect(html).not.toContain(FONT_FIXTURE_DIR);
expect(html).not.toContain(".vinext/fonts");
});
it("emits served URLs in the injected <style data-vinext-fonts> block", async () => {
// The injected @font-face CSS is the upstream source of truth the body
// `<link>` tags and HTTP `Link:` header are both derived from — a
// regression here would reproduce the bug across all three emission
// paths at once.
const res = await fetch(`${fontBaseUrl}/`);
const html = await res.text();
const styleMatch = html.match(/<style data-vinext-fonts[^>]*>([\s\S]*?)<\/style>/);
expect(styleMatch).not.toBeNull();
const styleContent = styleMatch![1];
expect(styleContent).toMatch(/url\(\/assets\/_vinext_fonts\/[^)]+\.woff2\)/);
expect(styleContent).not.toContain(FONT_FIXTURE_DIR);
expect(styleContent).not.toContain(".vinext/fonts");
});
it("serves the cached font files copied into the client output", async () => {
// Regression guard for the writeBundle copy hook: without it, the
// rewritten URLs would be syntactically correct but 404 at request
// time because the font files never leave `<root>/.vinext/fonts/`.
const res = await fetch(`${fontBaseUrl}/`);
const html = await res.text();
const match = html.match(/\/assets\/_vinext_fonts\/[^"]+\.woff2/);
expect(match).not.toBeNull();
const fontPath = match![0];
const fontRes = await fetch(`${fontBaseUrl}${fontPath}`);
expect(fontRes.status).toBe(200);
expect(fontRes.headers.get("content-type")).toBe("font/woff2");
expect(fontRes.headers.get("cache-control")).toContain("immutable");
});
});
// ---------------------------------------------------------------------------
// Malformed percent-encoded URL regression tests — App Router dev server
// (covers entries/app-rsc-entry.ts generated RSC handler decodeURIComponent)
// ---------------------------------------------------------------------------
describe("App Router dev server malformed URL handling", () => {
let devServer: ViteDevServer;
let devBaseUrl: string;
beforeAll(async () => {
({ server: devServer, baseUrl: devBaseUrl } = await startFixtureServer(APP_FIXTURE_DIR, {
appRouter: true,
}));
}, 30000);
afterAll(async () => {
await devServer?.close();
});
it("returns 400 for malformed percent-encoded path", async () => {
const res = await fetch(`${devBaseUrl}/%E0%A4%A`);
expect(res.status).toBe(400);
});
it("returns 400 for truncated percent sequence", async () => {
const res = await fetch(`${devBaseUrl}/%E0%A4`);
expect(res.status).toBe(400);
});
it("still serves valid pages", async () => {
const res = await fetch(`${devBaseUrl}/about`);
expect(res.status).toBe(200);
});
});
describe("App Router Static export", () => {
let rscBundlePath: string;
const exportDir = path.resolve(APP_FIXTURE_DIR, "out");
beforeAll(async () => {
rscBundlePath = await buildAppFixture(APP_FIXTURE_DIR);
}, 120_000);
afterAll(() => {
fs.rmSync(exportDir, { recursive: true, force: true });
});
it("exports static App Router pages to HTML files", async () => {
const { staticExportApp } = await import("../packages/vinext/src/build/static-export.js");
const { appRouter } = await import("../packages/vinext/src/routing/app-router.js");
const { resolveNextConfig } = await import("../packages/vinext/src/config/next-config.js");
const appDir = path.resolve(APP_FIXTURE_DIR, "app");
const routes = await appRouter(appDir);
const config = await resolveNextConfig({ output: "export" });
const result = await staticExportApp({
routes,
rscBundlePath,
outDir: exportDir,
config,
});
// Should have generated HTML files
expect(result.pageCount).toBeGreaterThan(0);
// Index page
expect(result.files).toContain("index.html");
const indexHtml = fs.readFileSync(path.join(exportDir, "index.html"), "utf-8");
expect(indexHtml).toContain("Welcome to App Router");
// About page
expect(result.files).toContain("about.html");
const aboutHtml = fs.readFileSync(path.join(exportDir, "about.html"), "utf-8");
expect(aboutHtml).toContain("About");
});
it("pre-renders dynamic routes from generateStaticParams", async () => {
// blog/[slug] has generateStaticParams returning hello-world and getting-started
expect(fs.existsSync(path.join(exportDir, "blog", "hello-world.html"))).toBe(true);
expect(fs.existsSync(path.join(exportDir, "blog", "getting-started.html"))).toBe(true);
const blogHtml = fs.readFileSync(path.join(exportDir, "blog", "hello-world.html"), "utf-8");
expect(blogHtml).toContain("hello-world");
});
it("generates 404.html for App Router", async () => {
expect(fs.existsSync(path.join(exportDir, "404.html"))).toBe(true);
const html404 = fs.readFileSync(path.join(exportDir, "404.html"), "utf-8");
// Custom not-found.tsx should be rendered
expect(html404).toContain("Page Not Found");
});
it("reports errors for dynamic routes without generateStaticParams", async () => {
const { staticExportApp } = await import("../packages/vinext/src/build/static-export.js");
const { resolveNextConfig } = await import("../packages/vinext/src/config/next-config.js");
// Create a fake route with isDynamic but no generateStaticParams
const fakeRoutes = [
{
pattern: "/fake/:id",
pagePath: path.resolve(APP_FIXTURE_DIR, "app", "page.tsx"),
routePath: null,
layouts: [],
templates: [],
parallelSlots: [],
routeSegments: ["fake", "[id]"],
layoutTreePositions: [],
loadingPath: null,
errorPath: null,
layoutErrorPaths: [],
notFoundPath: null,
notFoundPaths: [],
forbiddenPaths: [],
forbiddenPath: null,
unauthorizedPaths: [],
unauthorizedPath: null,
isDynamic: true,
params: ["id"],
patternParts: ["fake", ":id"],
},
];
const config = await resolveNextConfig({ output: "export" });
const tempDir = path.resolve(APP_FIXTURE_DIR, "out-temp-app");
try {
const result = await staticExportApp({
routes: fakeRoutes,
rscBundlePath,
outDir: tempDir,
config,
});
// Should have an error about missing generateStaticParams
expect(result.errors.some((e) => e.error.includes("generateStaticParams"))).toBe(true);
} finally {
fs.rmSync(tempDir, { recursive: true, force: true });
}
});
it("skips route handlers with warning", async () => {
const { staticExportApp } = await import("../packages/vinext/src/build/static-export.js");
const { resolveNextConfig } = await import("../packages/vinext/src/config/next-config.js");
// Create a fake API route
const fakeRoutes = [
{
pattern: "/api/test",
pagePath: null,
routePath: path.resolve(APP_FIXTURE_DIR, "app", "api", "hello", "route.ts"),
layouts: [],
templates: [],
parallelSlots: [],
routeSegments: ["api", "hello"],
layoutTreePositions: [],
loadingPath: null,
errorPath: null,
layoutErrorPaths: [],
notFoundPath: null,
notFoundPaths: [],
forbiddenPaths: [],
forbiddenPath: null,
unauthorizedPaths: [],
unauthorizedPath: null,
isDynamic: false,
params: [],
patternParts: ["api", "test"],
},
];
const config = await resolveNextConfig({ output: "export" });
const tempDir = path.resolve(APP_FIXTURE_DIR, "out-temp-api");
try {
const result = await staticExportApp({
routes: fakeRoutes,
rscBundlePath,
outDir: tempDir,
config,
});
expect(result.warnings.some((w) => w.includes("API route"))).toBe(true);
// Only the 404 page should be generated, no regular pages
expect(result.files.filter((f) => f !== "404.html")).toHaveLength(0);
} finally {
fs.rmSync(tempDir, { recursive: true, force: true });
}
});
});
describe("metadata routes integration (App Router)", () => {
// These tests reuse the App Router dev server from the integration tests
let server: ViteDevServer;
let baseUrl: string;
beforeAll(async () => {
({ server, baseUrl } = await startFixtureServer(APP_FIXTURE_DIR, { appRouter: true }));
});
afterAll(async () => {
await server.close();
});
it("serves /sitemap.xml from dynamic sitemap.ts", async () => {
const res = await fetch(`${baseUrl}/sitemap.xml`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("application/xml");
const xml = await res.text();
expect(xml).toContain("<urlset");
expect(xml).toContain('xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"');
expect(xml).toContain('xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"');
expect(xml).toContain('xmlns:xhtml="http://www.w3.org/1999/xhtml"');
expect(xml).toContain("https://example.com");
expect(xml).toContain("https://example.com/about");
expect(xml).toContain(
'<xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr" />',
);
expect(xml).toContain("<image:loc>https://example.com/image.jpg</image:loc>");
expect(xml).toContain("<video:title>Homepage Video</video:title>");
expect(xml).toContain("<video:content_loc>https://example.com/video.mp4</video:content_loc>");
});
it("serves /robots.txt from dynamic robots.ts", async () => {
const res = await fetch(`${baseUrl}/robots.txt`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/plain");
const text = await res.text();
expect(text).toContain("User-Agent: *");
expect(text).toContain("Allow: /");
expect(text).toContain("Disallow: /private/");
expect(text).toContain("Sitemap: https://example.com/sitemap.xml");
});
it("serves /manifest.webmanifest from dynamic manifest.ts", async () => {
const res = await fetch(`${baseUrl}/manifest.webmanifest`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("application/manifest+json");
const data = await res.json();
expect(data.name).toBe("App Basic");
expect(data.display).toBe("standalone");
});
it("serves sitemap routes that import but do not render client references", async () => {
// Ported from Next.js: test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
const res = await fetch(`${baseUrl}/client-ref-dependency/sitemap.xml`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("application/xml");
});
// Note: serving /icon from dynamic icon.tsx requires the RSC environment
// to have access to Satori + Resvg Node APIs. This works when the RSC env
// has proper Node externals configured. The discovery/routing is tested below.
it("scanMetadataFiles discovers icon.tsx as a dynamic icon route", async () => {
const { scanMetadataFiles } = await import("../packages/vinext/src/server/metadata-routes.js");
const appDir = path.resolve(import.meta.dirname, "./fixtures/app-basic/app");
const routes = scanMetadataFiles(appDir);
const iconRoute = routes.find(
(r: { type: string; isDynamic: boolean }) => r.type === "icon" && r.isDynamic,
);
expect(iconRoute).toBeDefined();
expect(iconRoute!.isDynamic).toBe(true);
expect(iconRoute!.servedUrl).toBe("/icon");
expect(iconRoute!.contentType).toBe("image/png");
});
it("scanMetadataFiles discovers static apple-icon.png at root", async () => {
const { scanMetadataFiles } = await import("../packages/vinext/src/server/metadata-routes.js");
const appDir = path.resolve(import.meta.dirname, "./fixtures/app-basic/app");
const routes = scanMetadataFiles(appDir);
const appleIcon = routes.find((r: { type: string }) => r.type === "apple-icon");
expect(appleIcon).toBeDefined();
expect(appleIcon!.isDynamic).toBe(false);
expect(appleIcon!.servedUrl).toBe("/apple-icon.png");
expect(appleIcon!.contentType).toBe("image/png");
});
it("scanMetadataFiles discovers nested opengraph-image.png", async () => {
const { scanMetadataFiles } = await import("../packages/vinext/src/server/metadata-routes.js");
const appDir = path.resolve(import.meta.dirname, "./fixtures/app-basic/app");
const routes = scanMetadataFiles(appDir);
const ogImage = routes.find(
(r: { type: string; servedUrl: string }) =>
r.type === "opengraph-image" && r.servedUrl === "/about/opengraph-image.png",
);
expect(ogImage).toBeDefined();
expect(ogImage!.isDynamic).toBe(false);
expect(ogImage!.contentType).toBe("image/png");
});
it("serves static /apple-icon.png as PNG with cache headers", async () => {
const res = await fetch(`${baseUrl}/apple-icon.png`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toBe("image/png");
expect(res.headers.get("cache-control")).toBe("public, max-age=0, must-revalidate");
const buf = await res.arrayBuffer();
// Verify it's a valid PNG (starts with PNG magic bytes)
const magic = new Uint8Array(buf.slice(0, 8));
expect(magic[0]).toBe(0x89);
expect(magic[1]).toBe(0x50); // P
expect(magic[2]).toBe(0x4e); // N
expect(magic[3]).toBe(0x47); // G
});
it("serves nested static /about/opengraph-image.png as PNG", async () => {
const res = await fetch(`${baseUrl}/about/opengraph-image.png`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toBe("image/png");
const buf = await res.arrayBuffer();
const magic = new Uint8Array(buf.slice(0, 4));
expect(magic[0]).toBe(0x89);
expect(magic[1]).toBe(0x50);
});
it("injects file-based metadata into head tags for static metadata files", async () => {
// Ported from Next.js: test/e2e/app-dir/metadata-static-file/metadata-static-file-static-route.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/metadata-static-file/metadata-static-file-static-route.test.ts
const res = await fetch(`${baseUrl}/metadata-static`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toMatch(/<link[^>]+rel="icon"[^>]+href="[^"]*\/favicon\.ico(?:\?[^"]+)?"[^>]*>/);
expect(html).toMatch(
/<link[^>]+rel="apple-touch-icon"[^>]+href="[^"]*\/metadata-static\/apple-icon\.png(?:\?[^"]+)?"[^>]*>/,
);
expect(html).toMatch(
/<link[^>]+rel="icon"[^>]+href="[^"]*\/metadata-static\/icon\.png(?:\?[^"]+)?"[^>]*>/,
);
expect(html).toMatch(
/<meta[^>]+property="og:image"[^>]+content="[^"]*\/metadata-static\/opengraph-image\.png(?:\?[^"]+)?"[^>]*>/,
);
expect(html).toMatch(
/<meta[^>]+property="og:image:alt"[^>]+content="Static OG image alt text[^"]*"[^>]*>/,
);
expect(html).toMatch(
/<meta[^>]+name="twitter:image"[^>]+content="[^"]*\/metadata-static\/twitter-image\.png(?:\?[^"]+)?"[^>]*>/,
);
expect(html).toMatch(
/<meta[^>]+name="twitter:image:alt"[^>]+content="Static Twitter image alt text[^"]*"[^>]*>/,
);
expect(html).toMatch(/<link[^>]+rel="manifest"[^>]+href="[^"]*\/manifest\.webmanifest"[^>]*>/);
});
it("injects sizes=any for static SVG icon metadata routes", async () => {
// Ported from Next.js: test/e2e/app-dir/metadata-svg-icon/metadata-svg-icon.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/metadata-svg-icon/metadata-svg-icon.test.ts
const res = await fetch(`${baseUrl}/metadata-svg-icon`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toMatch(
/<link[^>]+rel="icon"[^>]+href="[^"]*\/metadata-svg-icon\/icon\.svg(?:\?[^"]+)?"[^>]+sizes="any"[^>]+type="image\/svg\+xml"[^>]*>/,
);
});
it("renders icons.icon descriptor object metadata without crashing", async () => {
const res = await fetch(`${baseUrl}/metadata-icons-object`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toMatch(
/<link[^>]+rel="icon"[^>]+href="[^"]*\/metadata-icons-object\/object-icon\.png"[^>]+sizes="96x96"[^>]+type="image\/png"[^>]*>/,
);
});
it("injects dynamic metadata image routes into the head", async () => {
// Ported from Next.js: test/e2e/app-dir/metadata/metadata.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/metadata/metadata.test.ts
const homeRes = await fetch(`${baseUrl}/`);
expect(homeRes.status).toBe(200);
const homeHtml = await homeRes.text();
expect(homeHtml).toMatch(
/<link[^>]+rel="icon"[^>]+href="[^"]*\/favicon\.ico(?:\?[^"]+)?"[^>]*>/,
);
expect(homeHtml).toMatch(
/<link[^>]+rel="icon"[^>]+href="[^"]*\/icon(?:\?[^"]+)?"[^>]+sizes="32x32"[^>]+type="image\/png"[^>]*>/,
);
const blogRes = await fetch(`${baseUrl}/blog/hello-world`);
expect(blogRes.status).toBe(200);
const blogHtml = await blogRes.text();
expect(blogHtml).toMatch(
/<meta[^>]+property="og:image"[^>]+content="[^"]*\/blog\/hello-world\/opengraph-image(?:\?[^"]+)?"[^>]*>/,
);
expect(blogHtml).toMatch(/<meta[^>]+property="og:image:width"[^>]+content="1200"[^>]*>/);
expect(blogHtml).toMatch(/<meta[^>]+property="og:image:height"[^>]+content="630"[^>]*>/);
expect(blogHtml).toMatch(/<meta[^>]+property="og:image:type"[^>]+content="image\/png"[^>]*>/);
expect(blogHtml).toMatch(
/<meta[^>]+property="og:image:alt"[^>]+content="Blog post open graph image"[^>]*>/,
);
});
it("injects multiple generateImageMetadata icon routes into the head", async () => {
// Ported from Next.js: test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
const res = await fetch(`${baseUrl}/metadata-multi-image/big`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toMatch(
/<link[^>]+rel="icon"[^>]+href="[^"]*\/metadata-multi-image\/big\/icon\/big-small(?:\?[^"]+)?"[^>]+sizes="48x48"[^>]+type="image\/png"[^>]*>/,
);
expect(html).toMatch(
/<link[^>]+rel="icon"[^>]+href="[^"]*\/metadata-multi-image\/big\/icon\/big-medium(?:\?[^"]+)?"[^>]+sizes="72x72"[^>]+type="image\/png"[^>]*>/,
);
});
it("uses placeholder urls for static metadata files in dynamic segments", async () => {
// Ported from Next.js: test/e2e/app-dir/metadata-static-file/metadata-static-file-dynamic-route.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/metadata-static-file/metadata-static-file-dynamic-route.test.ts
const res = await fetch(`${baseUrl}/metadata-dynamic-static/hello-world`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toMatch(
/<link[^>]+rel="apple-touch-icon"[^>]+href="[^"]*\/metadata-dynamic-static\/-\/apple-icon\.png(?:\?[^"]+)?"[^>]*>/,
);
expect(html).toMatch(
/<link[^>]+rel="icon"[^>]+href="[^"]*\/metadata-dynamic-static\/-\/icon\.png(?:\?[^"]+)?"[^>]*>/,
);
expect(html).toMatch(
/<meta[^>]+property="og:image"[^>]+content="[^"]*\/metadata-dynamic-static\/-\/opengraph-image\.png(?:\?[^"]+)?"[^>]*>/,
);
expect(html).toMatch(
/<meta[^>]+name="twitter:image"[^>]+content="[^"]*\/metadata-dynamic-static\/-\/twitter-image\.png(?:\?[^"]+)?"[^>]*>/,
);
});
it("scanMetadataFiles discovers static favicon.ico at root", async () => {
const { scanMetadataFiles } = await import("../packages/vinext/src/server/metadata-routes.js");
const appDir = path.resolve(import.meta.dirname, "./fixtures/app-basic/app");
const routes = scanMetadataFiles(appDir);
const favicon = routes.find((r: { type: string }) => r.type === "favicon");
expect(favicon).toBeDefined();
expect(favicon!.isDynamic).toBe(false);
expect(favicon!.servedUrl).toBe("/favicon.ico");
expect(favicon!.contentType).toBe("image/x-icon");
});
it("serves static /favicon.ico with correct content type", async () => {
const res = await fetch(`${baseUrl}/favicon.ico`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toBe("image/x-icon");
expect(res.headers.get("cache-control")).toBe("public, max-age=0, must-revalidate");
const buf = await res.arrayBuffer();
// Verify it's a valid ICO file (starts with ICO magic bytes: 00 00 01 00)
const magic = new Uint8Array(buf.slice(0, 4));
expect(magic[0]).toBe(0x00);
expect(magic[1]).toBe(0x00);
expect(magic[2]).toBe(0x01);
expect(magic[3]).toBe(0x00);
});
// generateSitemaps() support — paginated sitemaps at /products/sitemap/{id}.xml
it("serves /products/sitemap/0.xml from generateSitemaps", async () => {
const res = await fetch(`${baseUrl}/products/sitemap/0.xml`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("application/xml");
const xml = await res.text();
expect(xml).toContain("<urlset");
expect(xml).toContain("https://example.com/products/batch-0/item-1");
expect(xml).toContain("https://example.com/products/batch-0/item-2");
// Should NOT contain entries from other batches
expect(xml).not.toContain("batch-1");
});
it("serves /products/sitemap/1.xml with distinct entries", async () => {
const res = await fetch(`${baseUrl}/products/sitemap/1.xml`);
expect(res.status).toBe(200);
const xml = await res.text();
expect(xml).toContain("https://example.com/products/batch-1/item-1");
expect(xml).toContain("https://example.com/products/batch-1/item-2");
expect(xml).not.toContain("batch-0");
});
// Ported from Next.js: test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
// "Should 404 when missing .xml extension"
it("returns 404 for sitemap id without .xml extension", async () => {
const res = await fetch(`${baseUrl}/products/sitemap/0`);
expect(res.status).toBe(404);
});
it("serves /products/sitemap/featured.xml with string id", async () => {
const res = await fetch(`${baseUrl}/products/sitemap/featured.xml`);
expect(res.status).toBe(200);
const xml = await res.text();
expect(xml).toContain("https://example.com/products/batch-featured/item-1");
expect(xml).toContain("https://example.com/products/batch-featured/item-2");
});
it("returns 404 for invalid sitemap id", async () => {
const res = await fetch(`${baseUrl}/products/sitemap/99.xml`);
expect(res.status).toBe(404);
});
it("does not serve /products/sitemap.xml when generateSitemaps exists", async () => {
const res = await fetch(`${baseUrl}/products/sitemap.xml`);
// The base URL should not match — either 404 or falls through to page routing
expect(res.status).toBe(404);
});
it("scanMetadataFiles discovers nested products/sitemap.ts", async () => {
const { scanMetadataFiles } = await import("../packages/vinext/src/server/metadata-routes.js");
const appDir = path.resolve(import.meta.dirname, "./fixtures/app-basic/app");
const routes = scanMetadataFiles(appDir);
const productsSitemap = routes.find(
(r: { type: string; servedUrl: string }) =>
r.type === "sitemap" && r.servedUrl === "/products/sitemap.xml",
);
expect(productsSitemap).toBeDefined();
expect(productsSitemap!.isDynamic).toBe(true);
});
it("scanMetadataFiles discovers opengraph-image in dynamic segment", async () => {
const { scanMetadataFiles } = await import("../packages/vinext/src/server/metadata-routes.js");
const appDir = path.resolve(import.meta.dirname, "./fixtures/app-basic/app");
const routes = scanMetadataFiles(appDir);
const ogImage = routes.find(
(r: { type: string; servedUrl: string }) =>
r.type === "opengraph-image" && r.servedUrl === "/blog/[slug]/opengraph-image",
);
expect(ogImage).toBeDefined();
expect(ogImage!.isDynamic).toBe(true);
});
it("scanMetadataFiles discovers static metadata files in dynamic segments with placeholders", async () => {
const { scanMetadataFiles } = await import("../packages/vinext/src/server/metadata-routes.js");
const appDir = path.resolve(import.meta.dirname, "./fixtures/app-basic/app");
const routes = scanMetadataFiles(appDir);
const icon = routes.find(
(r: { type: string; servedUrl: string }) =>
r.type === "icon" && r.servedUrl === "/metadata-dynamic-static/-/icon.png",
);
expect(icon).toBeDefined();
expect(icon!.isDynamic).toBe(false);
});
it("serves static metadata files in dynamic segments from placeholder urls", async () => {
const res = await fetch(`${baseUrl}/metadata-dynamic-static/-/icon.png`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toBe("image/png");
});
it("injects file-based metadata into not-found fallback pages", async () => {
const res = await fetch(`${baseUrl}/missing-metadata-page`);
expect(res.status).toBe(404);
const html = await res.text();
expect(html).toMatch(/<link[^>]+rel="icon"[^>]+href="[^"]*\/favicon\.ico(?:\?[^"]+)?"[^>]*>/);
expect(html).toMatch(/<link[^>]+rel="icon"[^>]+href="[^"]*\/icon(?:\?[^"]+)?"[^>]*>/);
expect(html).toMatch(/<link[^>]+rel="manifest"[^>]+href="[^"]*\/manifest\.webmanifest"[^>]*>/);
});
it("serves dynamic opengraph-image in dynamic segment with params", async () => {
const res = await fetch(`${baseUrl}/blog/hello-world/opengraph-image`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("image/png");
const text = await res.text();
expect(text).toBe("og:hello-world");
});
it("serves dynamic opengraph-image with different param values", async () => {
const res = await fetch(`${baseUrl}/blog/my-post/opengraph-image`);
expect(res.status).toBe(200);
const text = await res.text();
expect(text).toBe("og:my-post");
});
it("serves dynamic icon routes generated by generateImageMetadata", async () => {
// Ported from Next.js: test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
const res = await fetch(`${baseUrl}/metadata-multi-image/big/icon/big-small`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("image/png");
});
it("returns 404 for unknown generateImageMetadata ids", async () => {
// Ported from Next.js: test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
const res = await fetch(`${baseUrl}/metadata-multi-image/big/icon/missing`);
expect(res.status).toBe(404);
});
it("serves generateImageMetadata ids after catch-all metadata route params", async () => {
const res = await fetch(`${baseUrl}/metadata-multi-catchall/a/b/icon/a-b-small`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("image/png");
});
it("serves valid generateImageMetadata ids when invalid siblings are present", async () => {
const res = await fetch(`${baseUrl}/metadata-invalid-id-sibling/icon/good`);
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("image/png");
});
});
describe("App Router next.config.js features (dev server integration)", () => {
let server: ViteDevServer;
let baseUrl: string;
beforeAll(async () => {
// Uses the permanent next.config.ts in the app-basic fixture.
// That config includes redirects, rewrites, and headers needed by
// both these Vitest tests and the Playwright E2E tests.
({ server, baseUrl } = await startFixtureServer(APP_FIXTURE_DIR, { appRouter: true }));
}, 30000);
afterAll(async () => {
await server?.close();
});
it("applies redirects from next.config.js (permanent)", async () => {
const res = await fetch(`${baseUrl}/old-about`, { redirect: "manual" });
expect(res.status).toBe(308);
expect(res.headers.get("location")).toContain("/about");
});
it("applies redirects with dynamic params", async () => {
const res = await fetch(`${baseUrl}/old-blog/hello`, { redirect: "manual" });
expect(res.status).toBe(307);
expect(res.headers.get("location")).toContain("/blog/hello");
});
it("applies redirects with repeated dynamic params in the destination", async () => {
const res = await fetch(`${baseUrl}/repeat-redirect/hello`, { redirect: "manual" });
expect(res.status).toBe(307);
expect(res.headers.get("location")).toContain("/blog/hello/hello");
});
it("applies beforeFiles rewrites from next.config.js", async () => {
const res = await fetch(`${baseUrl}/rewrite-about`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("About");
});
it("applies rewrites with repeated dynamic params in the destination", async () => {
const res = await fetch(`${baseUrl}/repeat-rewrite/hello`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("hello/hello");
expect(html).toMatch(/Segments:.*2/);
});
it("applies afterFiles rewrites from next.config.js", async () => {
const res = await fetch(`${baseUrl}/after-rewrite-about`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("About");
});
// In App Router execution order, beforeFiles rewrites run after middleware.
// has/missing conditions on beforeFiles rules should therefore evaluate against
// middleware-modified headers/cookies, not the original pre-middleware request.
it("beforeFiles rewrite has/missing conditions see middleware-injected cookies", async () => {
// Without ?mw-auth, middleware does NOT inject mw-before-user=1.
// The has:[cookie:mw-before-user] beforeFiles rule should NOT match → no rewrite.
const noAuthRes = await fetch(`${baseUrl}/mw-gated-before`);
expect(noAuthRes.status).toBe(404);
// With ?mw-auth, middleware injects mw-before-user=1 into request cookies.
// The has:[cookie:mw-before-user] beforeFiles rule SHOULD match → rewrite to /about.
const authRes = await fetch(`${baseUrl}/mw-gated-before?mw-auth`);
expect(authRes.status).toBe(200);
const html = await authRes.text();
expect(html).toContain("About");
});
// Fallback rewrites run after middleware and after a 404 from route matching.
// has/missing conditions on fallback rules should evaluate against
// middleware-modified headers/cookies, not the original pre-middleware request.
it("fallback rewrite has/missing conditions see middleware-injected cookies", async () => {
// Without ?mw-auth, middleware does NOT inject mw-fallback-user=1.
// The has:[cookie:mw-fallback-user] fallback rule should NOT match → 404.
const noAuthRes = await fetch(`${baseUrl}/mw-gated-fallback`);
expect(noAuthRes.status).toBe(404);
// With ?mw-auth, middleware injects mw-fallback-user=1 into request cookies.
// The has:[cookie:mw-fallback-user] fallback rule SHOULD match → rewrite to /about.
const authRes = await fetch(`${baseUrl}/mw-gated-fallback?mw-auth`);
expect(authRes.status).toBe(200);
const html = await authRes.text();
expect(html).toContain("About");
});
it("fallback rewrites targeting Pages routes still work in mixed app/pages projects", async () => {
const noAuthRes = await fetch(`${baseUrl}/mw-gated-fallback-pages`);
expect(noAuthRes.status).toBe(404);
const { res, html } = await fetchHtml(`${baseUrl}`, "/mw-gated-fallback-pages?mw-auth", {
headers: {
authorization: "Bearer secret",
cookie: "a=1; b=2",
},
});
expect(res.status).toBe(200);
expect(html).toContain("Pages Header Override Delete");
expect(html).toContain('"page":"/pages-header-override-delete"');
});
it("applies custom headers from next.config.js on API routes", async () => {
const res = await fetch(`${baseUrl}/api/hello`);
expect(res.headers.get("x-custom-header")).toBe("vinext-app");
});
it("applies custom headers from next.config.js on page routes", async () => {
const res = await fetch(`${baseUrl}/about`);
expect(res.headers.get("x-page-header")).toBe("about-page");
});
it("does not redirect for non-matching paths", async () => {
const res = await fetch(`${baseUrl}/about`);
expect(res.status).toBe(200);
expect(res.redirected).toBe(false);
});
// ── Percent-encoded paths should be decoded before config matching ──
it("percent-encoded redirect path is decoded before config matching", async () => {
// /%6Fld-%61bout decodes to /old-about → /about (permanent redirect)
const res = await fetch(`${baseUrl}/%6Fld-%61bout`, { redirect: "manual" });
expect(res.status).toBe(308);
expect(res.headers.get("location")).toContain("/about");
});
it("percent-encoded header path is decoded before config matching", async () => {
// /%61bout decodes to /about → X-Page-Header: about-page
const res = await fetch(`${baseUrl}/%61bout`);
expect(res.headers.get("x-page-header")).toBe("about-page");
});
it("encoded slashes stay within a single segment for config header matching", async () => {
const res = await fetch(`${baseUrl}/api%2Fhello`);
expect(res.headers.get("x-custom-header")).toBeNull();
});
it("percent-encoded rewrite path is decoded before config matching", async () => {
// /rewrite-%61bout decodes to /rewrite-about → /about (beforeFiles rewrite)
const res = await fetch(`${baseUrl}/rewrite-%61bout`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("About");
});
});
describe("App Router next.config.js features (generateRscEntry)", () => {
// Use a minimal route list for testing — we only care about the generated config handling code
const minimalRoutes = [
{
pattern: "/",
pagePath: "/tmp/test/app/page.tsx",
routePath: null,
layouts: ["/tmp/test/app/layout.tsx"],
templates: [],
parallelSlots: [],
loadingPath: null,
errorPath: null,
layoutErrorPaths: [null],
notFoundPath: null,
forbiddenPaths: [],
forbiddenPath: null,
unauthorizedPaths: [],
unauthorizedPath: null,
routeSegments: [],
layoutTreePositions: [0],
isDynamic: false,
params: [],
},
{
pattern: "/about",
pagePath: "/tmp/test/app/about/page.tsx",
routePath: null,
layouts: ["/tmp/test/app/layout.tsx"],
templates: [],
parallelSlots: [],
loadingPath: null,
errorPath: null,
layoutErrorPaths: [null],
notFoundPath: null,
forbiddenPaths: [],
forbiddenPath: null,
unauthorizedPaths: [],
unauthorizedPath: null,
routeSegments: [],
layoutTreePositions: [0],
isDynamic: false,
params: [],
},
{
pattern: "/blog/:slug",
pagePath: "/tmp/test/app/blog/[slug]/page.tsx",
routePath: null,
layouts: ["/tmp/test/app/layout.tsx"],
templates: [],
parallelSlots: [],
loadingPath: null,
errorPath: null,
layoutErrorPaths: [null],
notFoundPath: null,
forbiddenPaths: [],
forbiddenPath: null,
unauthorizedPaths: [],
unauthorizedPath: null,
routeSegments: [],
layoutTreePositions: [0],
isDynamic: true,
params: ["slug"],
},
] as any[];
it("generates redirect handling code when redirects are provided", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
redirects: [
{ source: "/old-about", destination: "/about", permanent: true },
{ source: "/old-blog/:slug", destination: "/blog/:slug", permanent: false },
],
});
expect(code).toContain("createAppRscHandler");
expect(code).toContain("__configRedirects");
expect(code).toContain("configRedirects: __configRedirects");
expect(code).toContain("/old-about");
expect(code).toContain("/old-blog/:slug");
expect(code).toContain("permanent");
});
it("generates rewrite handling code when rewrites are provided", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [{ source: "/before-rewrite", destination: "/about" }],
afterFiles: [{ source: "/after-rewrite", destination: "/about" }],
fallback: [{ source: "/fallback-rewrite", destination: "/about" }],
},
});
expect(code).toContain("__configRewrites");
expect(code).toContain("configRewrites: __configRewrites");
expect(code).toContain("beforeFiles");
expect(code).toContain("afterFiles");
expect(code).toContain("fallback");
expect(code).toContain("/before-rewrite");
expect(code).toContain("/after-rewrite");
expect(code).toContain("/fallback-rewrite");
});
it("generates custom header handling code when headers are provided", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
headers: [{ source: "/api/(.*)", headers: [{ key: "X-Custom-Header", value: "vinext" }] }],
});
expect(code).toContain("__configHeaders");
expect(code).toContain("configHeaders: __configHeaders");
expect(code).toContain("X-Custom-Header");
expect(code).toContain("vinext");
});
it("embeds basePath and trailingSlash alongside config", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "/app", true, {
redirects: [{ source: "/old", destination: "/new", permanent: true }],
});
// User-provided basePath and trailingSlash must flow through into the
// generated entry alongside redirect config.
expect(code).toContain('"/app"');
expect(code).toContain("/old");
});
it("includes config pattern matching function for regex patterns", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
redirects: [{ source: "/docs/:path*", destination: "/wiki/:path*", permanent: false }],
});
expect(code).toContain("configRedirects: __configRedirects");
expect(code).toContain(":path*");
});
it("delegates request lifecycle to the typed App RSC handler", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
redirects: [{ source: "/old", destination: "/new", permanent: true }],
});
expect(code).toContain("export default __createAppRscHandler({");
expect(code).toContain("configRedirects: __configRedirects");
expect(code).toContain("dispatchMatchedPage({");
expect(code).toContain("dispatchMatchedRouteHandler({");
expect(code).toContain("matchRoute,");
});
it("describes beforeFiles rewrites in the generated app shape", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [{ source: "/old", destination: "/new" }],
afterFiles: [],
fallback: [],
},
});
expect(code).toContain("configRewrites: __configRewrites");
expect(code).toContain('"beforeFiles":[{"source":"/old","destination":"/new"}]');
});
it("passes the typed handler the generated route matcher and config", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [{ source: "/old", destination: "/new" }],
afterFiles: [],
fallback: [],
},
});
expect(code).toContain("const __routeMatcher = __createAppRscRouteMatcher(routes);");
expect(code).toContain("matchRoute,");
expect(code).toContain("configRewrites: __configRewrites");
});
it("describes afterFiles rewrites in the generated app shape", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [],
afterFiles: [{ source: "/old", destination: "/new" }],
fallback: [],
},
});
expect(code).toContain('"afterFiles":[{"source":"/old","destination":"/new"}]');
expect(code).toContain("configRewrites: __configRewrites");
});
it("applies fallback rewrites when no route matches", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [],
afterFiles: [],
fallback: [{ source: "/fallback", destination: "/about" }],
},
});
expect(code).toContain("configRewrites: __configRewrites");
expect(code).toContain('"fallback":[{"source":"/fallback","destination":"/about"}]');
});
it("describes external beforeFiles rewrites in the generated config", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [{ source: "/ph/:path*", destination: "https://us.i.posthog.com/:path*" }],
afterFiles: [],
fallback: [],
},
});
expect(code).toContain("configRewrites: __configRewrites");
expect(code).toContain("https://us.i.posthog.com/:path*");
});
it("describes external afterFiles rewrites in the generated config", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [],
afterFiles: [{ source: "/api/:path*", destination: "https://api.example.com/:path*" }],
fallback: [],
},
});
expect(code).toContain("configRewrites: __configRewrites");
expect(code).toContain("https://api.example.com/:path*");
});
it("describes external fallback rewrites in the generated config", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [],
afterFiles: [],
fallback: [
{ source: "/fallback/:path*", destination: "https://fallback.example.com/:path*" },
],
},
});
expect(code).toContain("configRewrites: __configRewrites");
expect(code).toContain("https://fallback.example.com/:path*");
});
it("passes basePath and redirect config to the generated handler", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "/app", false, {
redirects: [{ source: "/old", destination: "/new", permanent: true }],
});
expect(code).toContain('const __basePath = "/app"');
expect(code).toContain("basePath: __basePath");
expect(code).toContain("configRedirects: __configRedirects");
});
it("passes server action handlers and afterFiles rewrites to the typed handler", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
rewrites: {
beforeFiles: [],
afterFiles: [{ source: "/x", destination: "/y" }],
fallback: [],
},
});
expect(code).toContain("handleServerActionRequest({");
expect(code).toContain("loadServerAction");
expect(code).toContain('"afterFiles":[{"source":"/x","destination":"/y"}]');
expect(code).toContain("configRewrites: __configRewrites");
});
it("embeds allowedOrigins when provided", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
allowedOrigins: ["my-proxy.com", "*.my-domain.com"],
});
expect(code).toContain("__allowedOrigins");
expect(code).toContain("my-proxy.com");
expect(code).toContain("*.my-domain.com");
});
it("keeps allowedDevOrigins separate from allowedOrigins", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
allowedOrigins: ["actions.example.com"],
allowedDevOrigins: ["allowed.example.com"],
});
expect(code).toContain("actions.example.com");
expect(code).toContain("allowed.example.com");
});
it("origin validation does not use x-forwarded-host", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false);
const actionStart = code.indexOf("handleServerActionRequest({");
const actionEnd = code.indexOf("i18nConfig: __i18nConfig", actionStart);
const actionOptions = code.slice(actionStart, actionEnd);
// CSRF behavior belongs to the shared action helper. The generated entry
// should only pass the original Request and configured origins through.
expect(actionOptions).toContain("request,");
expect(actionOptions).toContain("allowedOrigins: __allowedOrigins");
expect(actionOptions).not.toContain("x-forwarded-host");
expect(code).not.toContain("validateCsrfOrigin(request, __allowedOrigins)");
expect(code).not.toContain("function __validateCsrfOrigin");
});
// ── Dev origin check code generation ────────────────────────────────
it("generates dev origin validation code in RSC entry", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false);
// Should include the dev origin validation function definition
expect(code).toContain("__validateDevRequestOrigin");
expect(code).toContain("__safeDevHosts");
expect(code).toContain("validateDevRequestOrigin: __validateDevRequestOrigin");
});
it("embeds allowedDevOrigins in dev origin check code", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false, {
allowedDevOrigins: ["staging.example.com", "*.preview.dev"],
});
expect(code).toContain("staging.example.com");
expect(code).toContain("*.preview.dev");
expect(code).toContain("__allowedDevOrigins");
});
it("loads allowedDevOrigins from next.config into the virtual RSC entry", async () => {
const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "vinext-app-rsc-allowed-dev-origins-"));
try {
fs.mkdirSync(path.join(tmpDir, "app"), { recursive: true });
fs.writeFileSync(
path.join(tmpDir, "app", "layout.tsx"),
"export default function Layout({ children }) { return <html><body>{children}</body></html>; }",
);
fs.writeFileSync(
path.join(tmpDir, "app", "page.tsx"),
"export default function Page() { return <div>allowed-dev-origins</div>; }",
);
fs.writeFileSync(
path.join(tmpDir, "next.config.mjs"),
`export default {
allowedDevOrigins: ["allowed.example.com"],
experimental: {
serverActions: {
allowedOrigins: ["actions.example.com"],
},
},
};`,
);
fs.symlinkSync(
path.resolve(__dirname, "..", "node_modules"),
path.join(tmpDir, "node_modules"),
"junction",
);
const testServer = await createServer({
root: tmpDir,
configFile: false,
plugins: [vinext({ appDir: tmpDir })],
server: { port: 0 },
logLevel: "silent",
});
try {
const resolved = await testServer.pluginContainer.resolveId("virtual:vinext-rsc-entry");
expect(resolved).toBeTruthy();
const loaded = await testServer.pluginContainer.load(resolved!.id);
const code = typeof loaded === "string" ? loaded : ((loaded as any)?.code ?? "");
expect(code).toContain('const __allowedDevOrigins = ["allowed.example.com"]');
expect(code).toContain('const __allowedOrigins = ["actions.example.com"]');
} finally {
await testServer.close();
}
} finally {
fs.rmSync(tmpDir, { recursive: true, force: true });
}
});
describe("RSC error runtime delegation", () => {
it("imports RSC error helpers from a normal server module", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false);
expect(code).toContain("sanitizeErrorForClient as __sanitizeErrorForClient");
expect(code).toContain("server/app-rsc-errors.js");
expect(code).toContain("createAppRscOnErrorHandler");
expect(code).toContain("server/app-rsc-error-handler.js");
});
it("keeps request-specific onError wiring in the generated entry", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes, null, [], null, "", false);
expect(code).toContain("createRscOnErrorHandler(pathname, routePath)");
expect(code).toContain(
"createAppRscOnErrorHandler(_reportRequestError, request, pathname, routePath)",
);
expect(code).not.toContain("function createRscOnErrorHandler(request, pathname, routePath)");
expect(code).not.toContain("return __createRscOnErrorHandler({");
});
});
});
describe("App Router middleware with NextRequest", () => {
let server: ViteDevServer;
let baseUrl: string;
beforeAll(async () => {
({ server, baseUrl } = await startFixtureServer(APP_FIXTURE_DIR, { appRouter: true }));
}, 30000);
afterAll(async () => {
await server?.close();
});
it("middleware receives NextRequest and can use .nextUrl", async () => {
// The middleware sets x-mw-pathname from request.nextUrl.pathname
// If the middleware received a plain Request, this would throw TypeError
const res = await fetch(`${baseUrl}/about`);
expect(res.status).toBe(200);
expect(res.headers.get("x-mw-ran")).toBe("true");
expect(res.headers.get("x-mw-pathname")).toBe("/about");
});
it("middleware NextRequest.nextUrl.pathname strips .rsc suffix", async () => {
// Regression: .rsc is an internal transport detail; middleware should see
// the clean pathname (/about), not the raw URL (/about.rsc).
const res = await fetch(`${baseUrl}/about.rsc`);
expect(res.headers.get("x-mw-ran")).toBe("true");
expect(res.headers.get("x-mw-pathname")).toBe("/about");
});
it("middleware receives NextRequest and can use .cookies", async () => {
// The middleware checks request.cookies.get() which requires NextRequest
const res = await fetch(`${baseUrl}/about`, {
headers: {
Cookie: "session=test-token",
},
});
expect(res.status).toBe(200);
expect(res.headers.get("x-mw-ran")).toBe("true");
expect(res.headers.get("x-mw-has-session")).toBe("true");
});
it("object-form matcher requires has and missing conditions", async () => {
const noHeaderRes = await fetch(`${baseUrl}/mw-object-gated`);
expect(noHeaderRes.status).toBe(200);
expect(noHeaderRes.headers.get("x-mw-ran")).toBeNull();
const blockedRes = await fetch(`${baseUrl}/mw-object-gated`, {
headers: {
"x-mw-allow": "1",
Cookie: "mw-blocked=1",
},
});
expect(blockedRes.status).toBe(200);
expect(blockedRes.headers.get("x-mw-ran")).toBeNull();
const allowedRes = await fetch(`${baseUrl}/mw-object-gated`, {
headers: { "x-mw-allow": "1" },
});
expect(allowedRes.status).toBe(200);
expect(allowedRes.headers.get("x-mw-ran")).toBe("true");
expect(allowedRes.headers.get("x-mw-pathname")).toBe("/mw-object-gated");
});
it("middleware can redirect using NextRequest", async () => {
const res = await fetch(`${baseUrl}/middleware-redirect`, { redirect: "manual" });
expect(res.status).toBe(307);
expect(res.headers.get("location")).toContain("/about");
});
it("middleware can rewrite using NextRequest", async () => {
const res = await fetch(`${baseUrl}/middleware-rewrite`);
expect(res.status).toBe(200);
const html = await res.text();
// Should render the / page content (the rewrite destination)
expect(html).toContain("Welcome to App Router");
});
it("middleware can return custom response", async () => {
const res = await fetch(`${baseUrl}/middleware-blocked`);
expect(res.status).toBe(403);
const text = await res.text();
expect(text).toBe("Blocked by middleware");
});
it("middleware that throws returns 500 instead of bypassing", async () => {
const res = await fetch(`${baseUrl}/middleware-throw`);
expect(res.status).toBe(500);
});
it("middleware request header overrides can delete credential headers before rendering", async () => {
// Ported from Next.js: test/e2e/middleware-request-header-overrides/test/index.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/middleware-request-header-overrides/test/index.test.ts
const { res, html } = await fetchHtml(baseUrl, "/header-override-delete", {
headers: {
authorization: "Bearer secret",
cookie: "a=1; b=2",
},
});
expect(res.status).toBe(200);
expect(html).toContain('id="authorization">null<');
expect(html).toContain('id="cookie">null<');
expect(html).toContain('id="middleware-header">hello-from-middleware<');
expect(html).toContain('id="cookie-count">0<');
});
it("middleware request header overrides also apply to App Route request.headers", async () => {
const res = await fetch(`${baseUrl}/api/header-override-delete`, {
headers: {
authorization: "Bearer secret",
cookie: "a=1; b=2",
},
});
expect(res.status).toBe(200);
expect(await res.json()).toEqual({
requestAuthorization: null,
requestCookie: null,
requestMiddlewareHeader: "hello-from-middleware",
headersApiAuthorization: null,
headersApiCookie: null,
headersApiMiddlewareHeader: "hello-from-middleware",
});
});
it("middleware request header overrides can delete credential headers before pages getServerSideProps in mixed projects", async () => {
const { res, html } = await fetchHtml(baseUrl, "/pages-header-override-delete", {
headers: {
authorization: "Bearer secret",
cookie: "a=1; b=2",
},
});
expect(res.status).toBe(200);
expect(html).toContain("Pages Header Override Delete");
expect(html).toContain('<p id="authorization"></p>');
expect(html).toContain('<p id="cookie"></p>');
expect(html).toContain('id="middleware-header">hello-from-middleware<');
expect(html).toContain('"authorization":null');
expect(html).toContain('"cookie":null');
});
it("middleware rewrite preserves query params from the rewrite URL", async () => {
// Middleware rewrites /middleware-rewrite-query → /search-query?searchParams=from-rewrite&extra=injected
// The rewrite URL's query string must be visible to the target page.
const res = await fetch(`${baseUrl}/middleware-rewrite-query`);
expect(res.status).toBe(200);
const html = await res.text();
// The /search-query page renders searchParams from props
expect(html).toContain("from-rewrite");
});
it("does not leak x-middleware-next or x-middleware-rewrite headers to the client", async () => {
// NextResponse.next() sets x-middleware-next internally.
// The dev server must strip it (and all x-middleware-* headers) before
// sending the response to the client — they are internal routing signals.
const nextRes = await fetch(`${baseUrl}/about`);
expect(nextRes.status).toBe(200);
// Middleware ran (verified by the custom header it sets)
expect(nextRes.headers.get("x-mw-ran")).toBe("true");
// Internal headers must NOT be present
expect(nextRes.headers.get("x-middleware-next")).toBeNull();
expect(nextRes.headers.get("x-middleware-rewrite")).toBeNull();
// Check that no x-middleware-* header leaked at all
for (const [key] of nextRes.headers) {
expect(key.startsWith("x-middleware-")).toBe(false);
}
// NextResponse.rewrite() sets x-middleware-rewrite internally.
const rewriteRes = await fetch(`${baseUrl}/middleware-rewrite`);
expect(rewriteRes.status).toBe(200);
expect(rewriteRes.headers.get("x-middleware-rewrite")).toBeNull();
expect(rewriteRes.headers.get("x-middleware-next")).toBeNull();
for (const [key] of rewriteRes.headers) {
expect(key.startsWith("x-middleware-")).toBe(false);
}
});
it("middleware receives event with waitUntil (for Clerk compat)", async () => {
const res = await fetch(`${baseUrl}/middleware-event`);
expect(res.status).toBe(200);
const text = await res.text();
expect(text).toBe("Event OK");
});
it("middleware response headers appear on intercepting route RSC responses", async () => {
// Intercepting route responses are constructed via renderInterceptResponse(),
// which must merge _mwCtx.headers into the Response — same as the normal
// page path through buildAppPageRscResponse().
const res = await fetch(`${baseUrl}/photos/42.rsc`, {
headers: {
Accept: "text/x-component",
"X-Vinext-Interception-Context": "/feed",
},
});
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toContain("text/x-component");
// Middleware sets x-mw-ran and x-mw-pathname on all matched paths
expect(res.headers.get("x-mw-ran")).toBe("true");
expect(res.headers.get("x-mw-pathname")).toBe("/photos/42");
const payload = await res.text();
expect(payload).toContain("Photo Modal");
expect(payload).toContain("Photo Feed");
});
});
describe("RSC Flight hint fix", () => {
it("generateRscEntry delegates renderToReadableStream hint normalization", () => {
// The RSC entry should shadow renderToReadableStream with a wrapper that
// rewrites Flight HL hint "stylesheet" → "style" at the stream source,
// so all consumers (SSR embed, client-side nav, server actions) get clean data.
const route: AppRoute = {
pattern: "/",
pagePath: "/tmp/test/app/page.tsx",
routePath: null,
layouts: ["/tmp/test/app/layout.tsx"],
templates: [],
parallelSlots: [],
loadingPath: null,
errorPath: null,
layoutErrorPaths: [null],
notFoundPath: null,
notFoundPaths: [null],
forbiddenPaths: [],
forbiddenPath: null,
unauthorizedPaths: [],
unauthorizedPath: null,
routeSegments: [],
layoutTreePositions: [0],
isDynamic: false,
params: [],
patternParts: ["/"],
};
const code = generateRscEntry("/tmp/test/app", [route]);
expect(code).toContain("_renderToReadableStream");
expect(code).toContain("createRscRenderer");
expect(code).toContain(
"const renderToReadableStream = createRscRenderer(_renderToReadableStream",
);
});
});
// ── Client reference preloading (Issue #256) ─────────────────────────────────
//
// On the first SSR request after server start, client reference modules are
// loaded lazily via async import(). The memoize cache in @vitejs/plugin-rsc is
// cold, so __vite_rsc_client_require__ returns an unresolved Promise. Without
// <Suspense> wrapping the root shell, React SSR rejects and the server returns
// 500. Subsequent requests work because the memoize cache is warm.
//
// Fix: the SSR entry eagerly preloads all client reference modules before
// renderToReadableStream runs, warming the memoize cache on every request.
describe("Client reference preloading (Issue #256)", () => {
it("preloading correctly warms the memoize cache", async () => {
// Replicate the memoize + lazy-load pattern from @vitejs/plugin-rsc
// to verify that preloading prevents the first-request 500.
const loadCounts = new Map<string, number>();
function memoize(f: (id: string) => Promise<Record<string, unknown>>) {
const cache = new Map<string, Promise<Record<string, unknown>>>();
return (id: string) => {
const cached = cache.get(id);
if (cached !== undefined) return cached;
const result = f(id);
cache.set(id, result);
return result;
};
}
// Simulate lazy client module loading (async import)
const requireModule = memoize(async (id: string) => {
loadCounts.set(id, (loadCounts.get(id) ?? 0) + 1);
// Simulate async module load
await new Promise((r) => setTimeout(r, 10));
return { default: `component-${id}` };
});
const clientRefs = { "comp-a": true, "comp-b": true, "comp-c": true };
// Without preloading: requireModule returns unresolved promises
const beforePreload = requireModule("comp-a");
// The promise is pending — this is what causes the 500 on first request
expect(beforePreload).toBeInstanceOf(Promise);
// Preload all references (the fix)
await Promise.all(Object.keys(clientRefs).map((id) => requireModule(id)));
// After preloading: memoize cache is warm, promises are resolved.
// Calling requireModule again returns the same (now-resolved) promise.
const afterPreload = requireModule("comp-a");
expect(afterPreload).toBeInstanceOf(Promise);
const resolved = await afterPreload;
expect(resolved).toEqual({ default: "component-comp-a" });
// Critical invariant: after preloading, the cached promise must be
// already settled. React SSR calls __vite_rsc_client_require__ and
// expects a synchronously resolvable value — if the promise is still
// pending, renderToReadableStream rejects (the original 500 bug).
const SETTLED = Symbol("settled");
const raceResult = await Promise.race([requireModule("comp-b"), Promise.resolve(SETTLED)]);
// If the cached promise were still pending, raceResult would be SETTLED.
// A resolved cache means the module value wins the race.
expect(raceResult).toEqual({ default: "component-comp-b" });
// Each module should only be loaded once (memoize dedup)
expect(loadCounts.get("comp-a")).toBe(1);
expect(loadCounts.get("comp-b")).toBe(1);
expect(loadCounts.get("comp-c")).toBe(1);
});
});
// ── Auto-registration of @vitejs/plugin-rsc ─────────────────────────────────
describe("RSC plugin auto-registration", () => {
let server: ViteDevServer;
let baseUrl: string;
beforeAll(async () => {
// Create a server with ONLY vinext() — no explicit @vitejs/plugin-rsc.
// The plugin should auto-detect the app/ directory and inject RSC.
// Note: appDir is passed because process.cwd() differs from root in tests.
// In real projects, cwd === root so appDir is not needed.
const { createServer } = await import("vite");
server = await createServer({
root: APP_FIXTURE_DIR,
configFile: false,
plugins: [vinext({ appDir: APP_FIXTURE_DIR })],
optimizeDeps: { holdUntilCrawlEnd: true },
server: { port: 0, cors: false },
logLevel: "silent",
});
await server.listen();
const addr = server.httpServer?.address();
if (addr && typeof addr === "object") {
baseUrl = `http://localhost:${addr.port}`;
}
}, 30000);
afterAll(async () => {
await server?.close();
});
it("renders the home page without explicit RSC plugin", async () => {
const { html, res } = await fetchHtml(baseUrl, "/");
expect(res.status).toBe(200);
expect(html).toContain("Welcome to App Router");
});
it("renders dynamic routes without explicit RSC plugin", async () => {
const res = await fetch(`${baseUrl}/blog/auto-rsc-test`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Blog Post");
expect(html).toContain("auto-rsc-test");
});
it("does not double-register when RSC plugin is already present", async () => {
const { createServer } = await import("vite");
const rsc = (await import("@vitejs/plugin-rsc")).default;
// Create a server with BOTH vinext({ rsc: false }) and explicit rsc().
// Should work without errors (no duplicate registration).
const serverWithExplicitRsc = await createServer({
root: APP_FIXTURE_DIR,
configFile: false,
plugins: [vinext({ appDir: APP_FIXTURE_DIR, rsc: false }), rsc({ entries: RSC_ENTRIES })],
optimizeDeps: { holdUntilCrawlEnd: true },
server: { port: 0, cors: false },
logLevel: "silent",
});
await serverWithExplicitRsc.listen();
try {
const addr = serverWithExplicitRsc.httpServer?.address();
const url = addr && typeof addr === "object" ? `http://localhost:${addr.port}` : "";
const res = await fetch(`${url}/`);
expect(res.status).toBe(200);
const html = await res.text();
expect(html).toContain("Welcome to App Router");
} finally {
await serverWithExplicitRsc.close();
}
}, 30000);
it("throws an error when user double-registers rsc() alongside auto-registration", async () => {
const { createBuilder } = await import("vite");
const rsc = (await import("@vitejs/plugin-rsc")).default;
// vinext() auto-registers @vitejs/plugin-rsc when app/ is detected.
// Manually adding rsc() on top should throw a clear error telling
// the user to fix their config — not silently double the build time.
await expect(
createBuilder({
root: APP_FIXTURE_DIR,
configFile: false,
plugins: [vinext({ appDir: APP_FIXTURE_DIR }), rsc({ entries: RSC_ENTRIES })],
logLevel: "silent",
}),
).rejects.toThrow("Duplicate @vitejs/plugin-rsc detected");
}, 30000);
it("auto-injects RSC plugin when src/app exists but root-level app/ does not", async () => {
// Regression test: the early detection path (before config()) must check
// both {base}/app and {base}/src/app to match the full config() logic.
const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "vinext-src-app-"));
try {
// Create only src/app/ — no root-level app/ directory.
fs.mkdirSync(path.join(tmpDir, "src", "app"), { recursive: true });
fs.writeFileSync(
path.join(tmpDir, "src", "app", "page.tsx"),
"export default function Home() { return <h1>Home</h1>; }",
);
// Symlink node_modules so createRequire can find @vitejs/plugin-rsc
// from the temp directory (resolution is relative to appDir).
fs.symlinkSync(
path.resolve(__dirname, "..", "node_modules"),
path.join(tmpDir, "node_modules"),
"junction",
);
const plugins = vinext({ appDir: tmpDir, react: false });
const resolvedPlugins = (
await Promise.all(
plugins.map(async (plugin) => {
if (plugin && typeof (plugin as any).then === "function") {
return await (plugin as Promise<any>);
}
return plugin;
}),
)
).flat();
const hasRscPlugin = resolvedPlugins.some((p) => p && (p as any).name === "rsc");
expect(hasRscPlugin).toBe(true);
} finally {
fs.rmSync(tmpDir, { recursive: true, force: true });
}
});
it("does NOT auto-inject RSC plugin when neither app/ nor src/app/ exists", async () => {
const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "vinext-no-app-"));
try {
// Empty directory — no app/ or src/app/.
const plugins = vinext({ appDir: tmpDir, react: false });
const resolvedPlugins = (
await Promise.all(
plugins.map(async (plugin) => {
if (plugin && typeof (plugin as any).then === "function") {
return await (plugin as Promise<any>);
}
return plugin;
}),
)
).flat();
const hasRscPlugin = resolvedPlugins.some((p) => p && (p as any).name === "rsc");
expect(hasRscPlugin).toBe(false);
} finally {
fs.rmSync(tmpDir, { recursive: true, force: true });
}
});
});
// ── External rewrite proxy credential forwarding (App Router) ────────────────
// Regression test: the proxyExternalRequest (imported from config-matchers) in the generated RSC entry
// must forward credential headers like Next.js while still stripping
// x-middleware-* headers before forwarding to external rewrite destinations.
describe("App Router external rewrite proxy credential forwarding", () => {
let mockServer: import("node:http").Server;
let mockPort: number;
let capturedHeaders: import("node:http").IncomingHttpHeaders | null = null;
let capturedUrl: URL | null = null;
let capturedBody: string | null = null;
let mockResponseMode: "plain" | "gzipHeaderAndBody" = "plain";
let server: ViteDevServer;
let baseUrl: string;
beforeAll(async () => {
// 1. Start a mock HTTP server that captures request headers
const http = await import("node:http");
mockServer = http.createServer((req, res) => {
capturedHeaders = req.headers;
capturedUrl = new URL(req.url ?? "/", `http://localhost:${mockPort || 80}`);
const chunks: Buffer[] = [];
req.on("data", (chunk) => chunks.push(Buffer.from(chunk)));
req.on("end", () => {
capturedBody = Buffer.concat(chunks).toString("utf8");
if (mockResponseMode === "gzipHeaderAndBody") {
const payload = "proxied gzipped body";
const gzipped = zlib.gzipSync(Buffer.from(payload));
res.writeHead(200, {
"Content-Type": "text/plain",
"Content-Encoding": "gzip",
"Content-Length": String(gzipped.byteLength),
"x-custom": "keep-me",
});
res.end(gzipped);
return;
}
res.writeHead(200, { "Content-Type": "text/plain" });
res.end("proxied ok");
});
});
await new Promise<void>((resolve) => mockServer.listen(0, resolve));
const addr = mockServer.address();
mockPort = typeof addr === "object" && addr ? addr.port : 0;
// 2. Set env var so the app-basic next.config.ts adds the external rewrite
process.env.TEST_EXTERNAL_PROXY_TARGET = `http://localhost:${mockPort}`;
process.env.TEST_MIDDLEWARE_EXTERNAL_PROXY_TARGET = `http://localhost:${mockPort}`;
// 3. Start the App Router dev server (reads next.config.ts at boot)
({ server, baseUrl } = await startFixtureServer(APP_FIXTURE_DIR, { appRouter: true }));
}, 30000);
afterAll(async () => {
delete process.env.TEST_EXTERNAL_PROXY_TARGET;
delete process.env.TEST_MIDDLEWARE_EXTERNAL_PROXY_TARGET;
await server?.close();
await new Promise<void>((resolve) => mockServer?.close(() => resolve()));
});
it("forwards credential headers and strips x-middleware-* headers from proxied requests to external rewrite targets", async () => {
mockResponseMode = "plain";
capturedHeaders = null;
capturedUrl = null;
await fetch(`${baseUrl}/proxy-external-test/some-path`, {
headers: {
Cookie: "session=secret123",
Authorization: "Bearer tok_secret",
"x-api-key": "sk_live_secret",
"proxy-authorization": "Basic cHJveHk=",
"x-middleware-next": "1",
"x-vinext-prerender-secret": "build-secret-123",
"x-custom-safe": "keep-me",
},
});
expect(capturedHeaders).not.toBeNull();
// Credential headers must be forwarded to match Next.js external rewrite proxying.
expect(capturedHeaders!["cookie"]).toBe("session=secret123");
expect(capturedHeaders!["authorization"]).toBe("Bearer tok_secret");
expect(capturedHeaders!["x-api-key"]).toBe("sk_live_secret");
expect(capturedHeaders!["proxy-authorization"]).toBe("Basic cHJveHk=");
// Internal middleware headers must be stripped
expect(capturedHeaders!["x-middleware-next"]).toBeUndefined();
expect(capturedHeaders!["x-vinext-prerender-secret"]).toBeUndefined();
// Non-sensitive headers must be preserved
expect(capturedHeaders!["x-custom-safe"]).toBe("keep-me");
});
it("preserves repeated query params when proxying to external rewrite targets", async () => {
mockResponseMode = "plain";
capturedHeaders = null;
capturedUrl = null;
const response = await fetch(`${baseUrl}/proxy-external-test/some-path?a=1&a=2&b=3`);
expect(response.status).toBe(200);
expect(capturedUrl).not.toBeNull();
expect([...capturedUrl!.searchParams.entries()]).toEqual([
["a", "1"],
["a", "2"],
["b", "3"],
]);
});
// Ported from Next.js: test/e2e/middleware-rewrites/test/index.test.ts
// https://github.com/vercel/next.js/blob/canary/test/e2e/middleware-rewrites/test/index.test.ts
it("proxies external URLs returned by middleware rewrites with body and headers", async () => {
mockResponseMode = "plain";
capturedHeaders = null;
capturedUrl = null;
capturedBody = null;
const body = JSON.stringify({ hello: "world" });
const response = await fetch(`${baseUrl}/middleware-external-rewrite?via=middleware`, {
method: "POST",
body,
headers: {
"content-type": "application/json",
Cookie: "session=secret123",
"x-from-test": "keep-me",
"x-middleware-test-rewrite-target": `http://localhost:${mockPort}`,
"x-middleware-test-request-override": "1",
},
});
expect(response.status).toBe(200);
expect(await response.text()).toBe("proxied ok");
expect(capturedUrl).not.toBeNull();
expect(capturedUrl!.pathname).toBe("/middleware-external-target");
expect([...capturedUrl!.searchParams.entries()]).toEqual([["via", "middleware"]]);
expect(capturedBody).toBe(body);
expect(capturedHeaders!["cookie"]).toBe("session=secret123");
expect(capturedHeaders!["x-from-test"]).toBe("keep-me");
expect(capturedHeaders!["x-hello-from-middleware1"]).toBe("hello");
expect(capturedHeaders!["x-hello-from-middleware2"]).toBe("world");
expect(capturedHeaders!["x-middleware-rewrite"]).toBeUndefined();
expect(capturedHeaders!["x-middleware-test-rewrite-target"]).toBeUndefined();
expect(capturedHeaders!["x-middleware-test-request-override"]).toBeUndefined();
expect(capturedHeaders!["x-vinext-mw-ctx"]).toBeUndefined();
});
it("strips content-encoding and content-length for Node fetch auto-decompression", async () => {
mockResponseMode = "gzipHeaderAndBody";
const response = await fetch(`${baseUrl}/proxy-external-test/some-path`);
expect(response.status).toBe(200);
expect(response.headers.get("content-encoding")).toBeNull();
expect(response.headers.get("content-length")).toBeNull();
expect(response.headers.get("x-custom")).toBe("keep-me");
expect(await response.text()).toBe("proxied gzipped body");
});
});
// ---------------------------------------------------------------------------
// generateRscEntry — ISR code generation assertions
// ---------------------------------------------------------------------------
describe("generateRscEntry ISR code generation", () => {
// Minimal route list — only the generated ISR guard logic matters here
const minimalRoutes = [
{
pattern: "/",
pagePath: "/tmp/test/app/page.tsx",
routePath: null,
layouts: ["/tmp/test/app/layout.tsx"],
templates: [],
parallelSlots: [],
loadingPath: null,
errorPath: null,
layoutErrorPaths: [null],
notFoundPath: null,
forbiddenPaths: [],
forbiddenPath: null,
unauthorizedPaths: [],
unauthorizedPath: null,
routeSegments: [],
layoutTreePositions: [0],
isDynamic: false,
params: [],
},
] as any[];
it('generated code contains process.env.NODE_ENV === "production" guard for ISR cache read', () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes);
expect(code).toContain('process.env.NODE_ENV === "production"');
});
it("generated handler delegates request and ctx handling to createAppRscHandler", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes);
expect(code).toContain("createAppRscHandler");
expect(code).toContain("export default __createAppRscHandler({");
});
it("generated code stores root layout params separately from leaf params", () => {
const routes = [
{
...minimalRoutes[0],
pattern: "/[lang]/[locale]/other/[slug]",
patternParts: [":lang", ":locale", "other", ":slug"],
params: ["lang", "locale", "slug"],
rootParamNames: ["lang", "locale"],
routeSegments: ["[lang]", "[locale]", "other", "[slug]"],
layoutTreePositions: [2],
},
] as any[];
const code = generateRscEntry("/tmp/test/app", routes);
// The user-declared rootParamNames must flow through to the route's entry,
// narrower than the full leaf params list. The typed RSC handler owns
// setting the per-request root params from this route shape.
expect(code).toContain('rootParamNames: ["lang","locale"]');
expect(code).not.toContain('rootParamNames: ["lang","locale","slug"]');
expect(code).toContain("rootParamNamesByPattern: rootParamNamesMap");
expect(code).not.toContain("__setRootParams(__pickRootParams(params, route.rootParamNames));");
expect(code).toContain("clearAppRequestContext as __clearRequestContext");
expect(code).toContain("server/app-request-context.js");
expect(code).not.toContain("function __clearRequestContext() {");
});
it("root params runtime getter returns current request values", async () => {
const { getRootParam, pickRootParams, setRootParams } =
await import("../packages/vinext/src/shims/root-params.js");
expect(pickRootParams({ lang: "en", locale: "us", slug: "post" }, ["lang", "locale"])).toEqual({
lang: "en",
locale: "us",
});
setRootParams({ lang: "en", locale: "us" });
await expect(getRootParam("lang")).resolves.toBe("en");
await expect(getRootParam("locale")).resolves.toBe("us");
await expect(getRootParam("slug")).resolves.toBeUndefined();
setRootParams(null);
});
it("generated code threads intercept layout modules through slot overrides", () => {
const routeWithInterceptLayouts: AppRoute = {
errorPath: null,
forbiddenPaths: [],
forbiddenPath: null,
isDynamic: false,
layoutErrorPaths: [null],
layouts: ["/tmp/test/app/layout.tsx"],
layoutTreePositions: [0],
loadingPath: null,
notFoundPath: null,
notFoundPaths: [null],
pagePath: "/tmp/test/app/page.tsx",
parallelSlots: [
{
defaultPath: "/tmp/test/app/@modal/default.tsx",
errorPath: null,
interceptingRoutes: [
{
convention: ".",
layoutPaths: ["/tmp/test/app/@modal/(.)explicit-layout/layout.tsx"],
pagePath: "/tmp/test/app/@modal/(.)explicit-layout/deeper/page.tsx",
params: [],
targetPattern: "/explicit-layout/deeper",
sourceMatchPattern: "/",
},
],
key: "modal@@modal",
layoutIndex: 0,
layoutPath: "/tmp/test/app/@modal/layout.tsx",
loadingPath: null,
name: "modal",
hasPage: false,
ownerDir: "/tmp/test/app/@modal",
ownerTreePath: "/",
pagePath: null,
routeSegments: null,
},
],
params: [],
pattern: "/",
patternParts: [],
routePath: null,
routeSegments: [],
templates: [],
templateTreePositions: [],
unauthorizedPaths: [],
unauthorizedPath: null,
};
const code = generateRscEntry("/tmp/test/app", [routeWithInterceptLayouts]);
// Intercept-layout modules must be wired into the route's intercept entry
// (mod_N is the generator's import alias scheme — `interceptLayouts: [mod_`
// confirms a module reference, not the original layout path string).
expect(code).toContain("interceptLayouts: [mod_");
expect(code).not.toMatch(/interceptLayouts:\s*\[\s*"\/tmp\/test\/app/);
});
it("generated code seeds root params around prerender generateStaticParams", () => {
const routeWithRootParams: AppRoute = {
errorPath: null,
forbiddenPath: null,
forbiddenPaths: [],
isDynamic: true,
layoutErrorPaths: [null],
layouts: ["/tmp/test/app/[locale]/layout.tsx"],
layoutTreePositions: [1],
loadingPath: null,
notFoundPath: null,
notFoundPaths: [null],
pagePath: "/tmp/test/app/[locale]/blog/[slug]/page.tsx",
parallelSlots: [],
params: ["locale", "slug"],
pattern: "/:locale/blog/:slug",
patternParts: [":locale", "blog", ":slug"],
rootParamNames: ["locale"],
routePath: null,
routeSegments: ["[locale]", "blog", "[slug]"],
templates: [],
templateTreePositions: [],
unauthorizedPaths: [],
unauthorizedPath: null,
};
const code = generateRscEntry("/tmp/test/app", [routeWithRootParams]);
// The user-declared dynamic-segment names must flow into the generated
// entry so prerender static-params know which params are root-scoped.
expect(code).toContain('"/:locale/blog/:slug"');
expect(code).toContain('["locale"]');
});
it("generated code delegates server-action header handling to the typed handler", () => {
const code = generateRscEntry("/tmp/test/app", minimalRoutes);
expect(code).toContain("handleServerActionRequest({");
expect(code).toContain("actionId,");
});
});