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([]);
});
});