diff --git a/integration/vite-dev-test.ts b/integration/vite-dev-test.ts index ff9870f85a..b77bd18e5d 100644 --- a/integration/vite-dev-test.ts +++ b/integration/vite-dev-test.ts @@ -6,6 +6,7 @@ import dedent from "dedent"; import { reactRouterConfig, + viteConfig, test, type TemplateName, type Files, @@ -13,29 +14,36 @@ import { const tsx = dedent; +const fixtures = [ + { + templateName: "vite-5-template", + viteEnvironmentApi: false, + }, + { + templateName: "vite-6-template", + viteEnvironmentApi: true, + }, + { + templateName: "rsc-vite-framework", + viteEnvironmentApi: true, + }, +] as const satisfies ReadonlyArray<{ + templateName: TemplateName; + viteEnvironmentApi: boolean; +}>; + test.describe("Vite dev", () => { - [false, true].forEach((viteEnvironmentApi) => { - test.describe(`viteEnvironmentApi: ${viteEnvironmentApi}`, () => { + for (const { templateName, viteEnvironmentApi } of fixtures) { + test.describe(`template: ${templateName} viteEnvironmentApi: ${viteEnvironmentApi}`, () => { const files: Files = async ({ port }) => ({ "react-router.config.ts": reactRouterConfig({ viteEnvironmentApi, }), - "vite.config.ts": tsx` - import { defineConfig } from "vite"; - import { reactRouter } from "@react-router/dev/vite"; - import mdx from "@mdx-js/rollup"; - - export default defineConfig({ - server: { - port: ${port}, - strictPort: true, - }, - plugins: [ - mdx(), - reactRouter(), - ], - }); - `, + "vite.config.ts": await viteConfig.basic({ + port, + templateName, + mdx: true, + }), "app/root.tsx": tsx` import { Links, Meta, Outlet, Scripts } from "react-router"; @@ -58,6 +66,17 @@ test.describe("Vite dev", () => { } `, "app/routes/_index.tsx": tsx` + export default function IndexRoute() { + return ( +
+

Index

+ +

HMR updated: no

+
+ ); + } + `, + "app/routes/deferred-loader-data.tsx": tsx` import { Suspense } from "react"; import { Await, useLoaderData } from "react-router"; @@ -73,9 +92,6 @@ test.describe("Vite dev", () => { return (
-

Index

- -

HMR updated: no

Defer finished: no

}> {() =>

Defer finished: yes

}
@@ -159,37 +175,41 @@ test.describe("Vite dev", () => { `, - ".env": ` - ENV_VAR_FROM_DOTENV_FILE=Content from .env file - `, - "app/routes/dotenv.tsx": tsx` - import { useState, useEffect } from "react"; - import { useLoaderData } from "react-router"; - - export const loader = () => { - return { - loaderContent: process.env.ENV_VAR_FROM_DOTENV_FILE, + ...(!templateName.includes("rsc") + ? { + ".env": ` + ENV_VAR_FROM_DOTENV_FILE=Content from .env file + `, + "app/routes/dotenv.tsx": tsx` + import { useState, useEffect } from "react"; + import { useLoaderData } from "react-router"; + + export const loader = () => { + return { + loaderContent: process.env.ENV_VAR_FROM_DOTENV_FILE, + } + } + + export default function DotenvRoute() { + const { loaderContent } = useLoaderData(); + + const [clientContent, setClientContent] = useState(''); + useEffect(() => { + try { + setClientContent("process.env.ENV_VAR_FROM_DOTENV_FILE shouldn't be available on the client, found: " + process.env.ENV_VAR_FROM_DOTENV_FILE); + } catch (err) { + setClientContent("process.env.ENV_VAR_FROM_DOTENV_FILE not available on the client, which is a good thing"); + } + }, []); + + return <> +
{loaderContent}
+
{clientContent}
+ + } + `, } - } - - export default function DotenvRoute() { - const { loaderContent } = useLoaderData(); - - const [clientContent, setClientContent] = useState(''); - useEffect(() => { - try { - setClientContent("process.env.ENV_VAR_FROM_DOTENV_FILE shouldn't be available on the client, found: " + process.env.ENV_VAR_FROM_DOTENV_FILE); - } catch (err) { - setClientContent("process.env.ENV_VAR_FROM_DOTENV_FILE not available on the client, which is a good thing"); - } - }, []); - - return <> -
{loaderContent}
-
{clientContent}
- - } - `, + : {}), "app/routes/error-stacktrace.tsx": tsx` import { Link, useLocation, type LoaderFunction, type MetaFunction } from "react-router"; @@ -254,11 +274,7 @@ test.describe("Vite dev", () => { `, }); - const templateName: TemplateName = viteEnvironmentApi - ? "vite-6-template" - : "vite-5-template"; - - test("renders matching routes", async ({ dev, page }) => { + test("renders matching routes with HMR", async ({ dev, page }) => { const { cwd, port } = await dev(files, templateName); await page.goto(`http://localhost:${port}/`, { @@ -269,9 +285,6 @@ test.describe("Vite dev", () => { expect(page.errors).toEqual([]); await expect(page.locator("#index [data-title]")).toHaveText("Index"); - await expect(page.locator("#index [data-defer]")).toHaveText( - "Defer finished: yes", - ); let hmrStatus = page.locator("#index [data-hmr]"); await expect(hmrStatus).toHaveText("HMR updated: no"); @@ -297,6 +310,27 @@ test.describe("Vite dev", () => { expect(page.errors).toEqual([]); }); + test("deferred loader data", async ({ dev, page }) => { + test.fixme( + templateName.includes("rsc"), + "RSC doesn't support Await component", + ); + + const { port } = await dev(files, templateName); + await page.goto(`http://localhost:${port}/deferred-loader-data`, { + waitUntil: "networkidle", + }); + + // Ensure no errors on page load + expect(page.errors).toEqual([]); + + await expect(page.locator("#index [data-defer]")).toHaveText( + "Defer finished: yes", + ); + // Ensure no errors after deferred rendering + expect(page.errors).toEqual([]); + }); + test("handles multiple set-cookie headers", async ({ dev, page }) => { const { port } = await dev(files, templateName); @@ -357,6 +391,11 @@ test.describe("Vite dev", () => { }); test("loads .env file", async ({ dev, page }) => { + test.fixme( + templateName.includes("rsc"), + "RSC Framework Mode doesn't load .env files", + ); + const { port } = await dev(files, templateName); await page.goto(`http://localhost:${port}/dotenv`, { @@ -379,6 +418,11 @@ test.describe("Vite dev", () => { dev, page, }) => { + test.fixme( + templateName.includes("rsc"), + "Investigate this for RSC Framework Mode", + ); + const { port } = await dev(files, templateName); await page.goto( @@ -401,6 +445,11 @@ test.describe("Vite dev", () => { }); test("handle known route exports with HMR", async ({ dev, page }) => { + test.fixme( + templateName.includes("rsc"), + "Investigate why this is failing in RSC Framework Mode", + ); + const { cwd, port } = await dev(files, templateName); await page.goto(`http://localhost:${port}/known-route-exports`, { @@ -450,5 +499,5 @@ test.describe("Vite dev", () => { expect(page.errors).toEqual([]); }); }); - }); + } });