|
| 1 | +import type { Page } from "@playwright/test"; |
| 2 | +import { expect } from "@playwright/test"; |
| 3 | + |
| 4 | +import { js } from "../helpers/create-fixture"; |
| 5 | +import type { TemplateName, Files } from "../helpers/vite"; |
| 6 | +import { reactRouterConfig, test } from "../helpers/vite"; |
| 7 | + |
| 8 | +type PrerenderPaths = |
| 9 | + | boolean |
| 10 | + | Array<string> |
| 11 | + | ((args: { |
| 12 | + getStaticPaths: () => string[]; |
| 13 | + }) => Array<string> | Promise<Array<string>>); |
| 14 | + |
| 15 | +function simplePage(name: string) { |
| 16 | + return js` |
| 17 | + export default function Route({ params: { slug } }) { |
| 18 | + return ( |
| 19 | + <div> |
| 20 | + <h1 data-testid="${name}">{${JSON.stringify(name)} + (slug ? " " + slug : "")}</h1> |
| 21 | + </div> |
| 22 | + ); |
| 23 | + } |
| 24 | + `; |
| 25 | +} |
| 26 | + |
| 27 | +function prerender({ |
| 28 | + files, |
| 29 | + links, |
| 30 | + prerender = true, |
| 31 | + ssr, |
| 32 | + vitePreview, |
| 33 | +}: { |
| 34 | + files?: Files; |
| 35 | + links?: string[]; |
| 36 | + prerender?: |
| 37 | + | PrerenderPaths |
| 38 | + | { |
| 39 | + paths: PrerenderPaths; |
| 40 | + unstable_concurrency?: number; |
| 41 | + }; |
| 42 | + ssr?: boolean; |
| 43 | + vitePreview: ( |
| 44 | + files: Files, |
| 45 | + templateName?: TemplateName | undefined, |
| 46 | + ) => Promise<{ |
| 47 | + port: number; |
| 48 | + cwd: string; |
| 49 | + }>; |
| 50 | +}) { |
| 51 | + return vitePreview(async (args) => { |
| 52 | + return { |
| 53 | + "react-router.config.ts": reactRouterConfig({ prerender, ssr }), |
| 54 | + "app/root.tsx": js` |
| 55 | + import { Link, Links, Meta, Outlet, ScrollRestoration, useRouteLoaderData } from "react-router"; |
| 56 | +
|
| 57 | + export function loader() { |
| 58 | + return { |
| 59 | + IS_RR_BUILD_REQUEST: process.env.IS_RR_BUILD_REQUEST |
| 60 | + } |
| 61 | + } |
| 62 | + |
| 63 | + export default function Route() { |
| 64 | + return ( |
| 65 | + <Outlet /> |
| 66 | + ) |
| 67 | + } |
| 68 | +
|
| 69 | + export function ErrorBoundary() { |
| 70 | + return <p data-testid="root-error-boundary">Root Error Boundary</p> |
| 71 | + } |
| 72 | +
|
| 73 | + export function Layout({ children }) { |
| 74 | + const { IS_RR_BUILD_REQUEST } = useRouteLoaderData("root") ?? {}; |
| 75 | +
|
| 76 | + return ( |
| 77 | + <html lang="en"> |
| 78 | + <head> |
| 79 | + <meta charSet="utf-8" /> |
| 80 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 81 | + <Meta /> |
| 82 | + <Links /> |
| 83 | + </head> |
| 84 | + <body> |
| 85 | + <p data-testid="IS_RR_BUILD_REQUEST">{IS_RR_BUILD_REQUEST}</p> |
| 86 | + ${links ? links.map((link) => js`<Link to="${link}">${link}</Link>`).join("\n") : ``} |
| 87 | + {children} |
| 88 | + <ScrollRestoration /> |
| 89 | + </body> |
| 90 | + </html> |
| 91 | + ); |
| 92 | + } |
| 93 | + `, |
| 94 | + "app/routes/_index.tsx": simplePage("index"), |
| 95 | + ...(await files?.(args)), |
| 96 | + }; |
| 97 | + }, "rsc-vite-framework"); |
| 98 | +} |
| 99 | + |
| 100 | +async function assertPrerendered(page: Page, expectedPrerender = true) { |
| 101 | + const isBuildRequest = await page |
| 102 | + .getByTestId("IS_RR_BUILD_REQUEST") |
| 103 | + .textContent(); |
| 104 | + expect(isBuildRequest).toBe(expectedPrerender ? "yes" : ""); |
| 105 | +} |
| 106 | + |
| 107 | +test.describe("rsc prerender", () => { |
| 108 | + test("prerenders single route", async ({ page, vitePreview }) => { |
| 109 | + const { port } = await prerender({ |
| 110 | + links: ["/", "/404/not-found"], |
| 111 | + vitePreview, |
| 112 | + }); |
| 113 | + const baseUrl = `http://localhost:${port}`; |
| 114 | + |
| 115 | + await page.goto(baseUrl); |
| 116 | + await assertPrerendered(page); |
| 117 | + const index = await page.getByTestId("index").textContent(); |
| 118 | + expect(index).toBe("index"); |
| 119 | + |
| 120 | + await page.click('text="/404/not-found"'); |
| 121 | + await page.waitForURL(`${baseUrl}/404/not-found`); |
| 122 | + const errorBoundary = await page |
| 123 | + .getByTestId("root-error-boundary") |
| 124 | + .textContent(); |
| 125 | + expect(errorBoundary).toBe("Root Error Boundary"); |
| 126 | + |
| 127 | + await page.click('text="/"'); |
| 128 | + await page.waitForURL(baseUrl + "/"); |
| 129 | + const index2 = await page.getByTestId("index").textContent(); |
| 130 | + expect(index2).toBe("index"); |
| 131 | + }); |
| 132 | + |
| 133 | + test("prerenders dynamic route", async ({ page, vitePreview }) => { |
| 134 | + const { port } = await prerender({ |
| 135 | + files: async () => ({ |
| 136 | + "app/routes/products.$slug.tsx": simplePage("product"), |
| 137 | + }), |
| 138 | + links: ["/", "/products/1", "/products/2"], |
| 139 | + prerender: ["/", "/products/1"], |
| 140 | + vitePreview, |
| 141 | + }); |
| 142 | + const baseUrl = `http://localhost:${port}`; |
| 143 | + |
| 144 | + await page.goto(baseUrl, { waitUntil: "networkidle" }); |
| 145 | + const index = await page.getByTestId("index").textContent(); |
| 146 | + expect(index).toBe("index"); |
| 147 | + await assertPrerendered(page); |
| 148 | + |
| 149 | + await page.click('text="/products/1"'); |
| 150 | + await page.waitForURL(`${baseUrl}/products/1`); |
| 151 | + const product1 = await page.getByTestId("product").textContent(); |
| 152 | + expect(product1).toBe("product 1"); |
| 153 | + |
| 154 | + await page.click('text="/products/2"'); |
| 155 | + await page.waitForURL(`${baseUrl}/products/2`); |
| 156 | + const product2 = await page.getByTestId("product").textContent(); |
| 157 | + expect(product2).toBe("product 2"); |
| 158 | + |
| 159 | + await page.click('text="/"'); |
| 160 | + await page.waitForURL(baseUrl + "/"); |
| 161 | + const index2 = await page.getByTestId("index").textContent(); |
| 162 | + expect(index2).toBe("index"); |
| 163 | + }); |
| 164 | + |
| 165 | + test("prerenders single page app", async ({ page, vitePreview }) => { |
| 166 | + const { port } = await prerender({ |
| 167 | + links: ["/", "/404/not-found"], |
| 168 | + ssr: false, |
| 169 | + vitePreview, |
| 170 | + }); |
| 171 | + const baseUrl = `http://localhost:${port}`; |
| 172 | + |
| 173 | + await page.goto(baseUrl); |
| 174 | + const index = await page.getByTestId("index").textContent(); |
| 175 | + expect(index).toBe("index"); |
| 176 | + await assertPrerendered(page); |
| 177 | + |
| 178 | + await page.click('text="/404/not-found"'); |
| 179 | + await page.waitForURL(`${baseUrl}/404/not-found`); |
| 180 | + const errorBoundary = await page |
| 181 | + .getByTestId("root-error-boundary") |
| 182 | + .textContent(); |
| 183 | + expect(errorBoundary).toBe("Root Error Boundary"); |
| 184 | + }); |
| 185 | +}); |
0 commit comments