diff --git a/integration/vite-manifest-invalidation-test.ts b/integration/vite-manifest-invalidation-test.ts index 728ab544253..3b5e8c3c39e 100644 --- a/integration/vite-manifest-invalidation-test.ts +++ b/integration/vite-manifest-invalidation-test.ts @@ -1,4 +1,4 @@ -import { test } from "@playwright/test"; +import { test, expect } from "@playwright/test"; import getPort from "get-port"; import { @@ -20,9 +20,8 @@ const files = { }, []); return ( -
+

Mounted: {mounted ? "yes" : "no"}

-

HMR updated: 0

/other
); @@ -36,7 +35,7 @@ const files = { export default function Route() { const loaderData = useLoaderData(); return ( -
loaderData = {JSON.stringify(loaderData)}
+
loaderData = {JSON.stringify(loaderData)}
); } `, @@ -66,24 +65,38 @@ test.describe(async () => { page.on("pageerror", (error) => pageErrors.push(error)); let edit = createEditor(cwd); - // wait hydration to ensure initial manifest is loaded - await page.goto(`http://localhost:${port}/`); - await page.getByText("Mounted: yes").click(); + await page.goto(`http://localhost:${port}`, { waitUntil: "networkidle" }); + await expect(page.locator("[data-mounted]")).toHaveText("Mounted: yes"); + expect(pageErrors).toEqual([]); - // remove loader export in other page should invalidate manifest - await edit("app/routes/other.tsx", (contents) => - contents.replace(/export const loader.*/, "") - ); + let originalContents: string; + + // Removing loader export in other page should invalidate manifest + await edit("app/routes/other.tsx", (contents) => { + originalContents = contents; + return contents.replace(/export const loader.*/, ""); + }); - // after browser reload, client should be aware of there's no loader + // After browser reload, client should be aware that there's no loader on the other route if (browserName === "webkit") { - // force new page instance for webkit. - // otherwise browser doesn't seem to fetch new manifest probably due to caching. + // Force new page instance for webkit. + // Otherwise browser doesn't seem to fetch new manifest probably due to caching. page = await context.newPage(); } - await page.goto(`http://localhost:${port}/`); - await page.getByText("Mounted: yes").click(); + await page.goto(`http://localhost:${port}`, { waitUntil: "networkidle" }); + await expect(page.locator("[data-mounted]")).toHaveText("Mounted: yes"); await page.getByRole("link", { name: "/other" }).click(); - await page.getByText("loaderData = null").click(); + await expect(page.locator("[data-loader-data]")).toHaveText( + "loaderData = null" + ); + expect(pageErrors).toEqual([]); + + // Revert route to original state to check HMR works and to ensure the + // original file contents were valid + await edit("app/routes/other.tsx", () => originalContents); + await expect(page.locator("[data-loader-data]")).toHaveText( + 'loaderData = "hello"' + ); + expect(pageErrors).toEqual([]); }); });