;
+ }
+ `,
+ },
+ });
+
+ // This creates an interactive app using puppeteer.
+ appFixture = await createAppFixture(fixture);
+});
+
+test.afterAll(() => appFixture.close());
+
+test(
+ "expect to be able to browse backward out of a remix app, then forward " +
+ "twice in history and have pages render correctly",
+ async ({ page, browserName }) => {
+ test.skip(
+ browserName === "firefox",
+ "FireFox doesn't support browsing to an empty page (aka about:blank)"
+ );
+
+ let app = new PlaywrightFixture(appFixture, page);
+
+ // Slow down the entry chunk on the second load so the bug surfaces
+ let isSecondLoad = false;
+ await page.route(/entry/, async (route) => {
+ if (isSecondLoad) {
+ await new Promise((r) => setTimeout(r, 1000));
+ }
+ route.continue();
+ });
+
+ // This sets up the Remix modules cache in memory, priming the error case.
+ await app.goto("/");
+ await app.clickLink("/burgers");
+ expect(await page.content()).toContain("cheeseburger");
+ await page.goBack();
+ await page.waitForSelector("#pizza");
+ expect(await app.getHtml()).toContain("pizza");
+
+ // Takes the browser out of the Remix app
+ await page.goBack();
+ expect(page.url()).toContain("about:blank");
+
+ // Forward to / and immediately again to /burgers. This will trigger the
+ // error since we'll load __routeModules for / but then try to hydrate /burgers
+ isSecondLoad = true;
+ await page.goForward();
+ await page.goForward();
+ await page.waitForSelector("#cheeseburger");
+
+ // If we resolve the error, we should hard reload and eventually
+ // successfully render /burgers
+ await page.waitForSelector("#cheeseburger");
+ expect(await app.getHtml()).toContain("cheeseburger");
+ }
+);
diff --git a/integration/bug-report-test.ts b/integration/bug-report-test.ts
new file mode 100644
index 0000000000..adc4beb59a
--- /dev/null
+++ b/integration/bug-report-test.ts
@@ -0,0 +1,121 @@
+import { test, expect } from "@playwright/test";
+
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import {
+ createAppFixture,
+ createFixture,
+ js,
+} from "./helpers/create-fixture.js";
+
+let fixture: Fixture;
+let appFixture: AppFixture;
+
+////////////////////////////////////////////////////////////////////////////////
+// 💿 👋 Hola! It's me, Dora the Remix Disc, I'm here to help you write a great
+// bug report pull request.
+//
+// You don't need to fix the bug, this is just to report one.
+//
+// The pull request you are submitting is supposed to fail when created, to let
+// the team see the erroneous behavior, and understand what's going wrong.
+//
+// If you happen to have a fix as well, it will have to be applied in a subsequent
+// commit to this pull request, and your now-succeeding test will have to be moved
+// to the appropriate file.
+//
+// First, make sure to install dependencies and build Remix. From the root of
+// the project, run this:
+//
+// ```
+// pnpm install && pnpm build
+// ```
+//
+// Now try running this test:
+//
+// ```
+// pnpm bug-report-test
+// ```
+//
+// You can add `--watch` to the end to have it re-run on file changes:
+//
+// ```
+// pnpm bug-report-test --watch
+// ```
+////////////////////////////////////////////////////////////////////////////////
+
+test.beforeEach(async ({ context }) => {
+ await context.route(/_data/, async (route) => {
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ route.continue();
+ });
+});
+
+test.beforeAll(async () => {
+ fixture = await createFixture({
+ ////////////////////////////////////////////////////////////////////////////
+ // 💿 Next, add files to this object, just like files in a real app,
+ // `createFixture` will make an app and run your tests against it.
+ ////////////////////////////////////////////////////////////////////////////
+ files: {
+ "app/routes/_index.tsx": js`
+ import { json } from "@remix-run/node";
+ import { useLoaderData, Link } from "@remix-run/react";
+
+ export function loader() {
+ return json("pizza");
+ }
+
+ export default function Index() {
+ let data = useLoaderData();
+ return (
+
;
+ }
+ `,
+ },
+ });
+
+ // This creates an interactive app using playwright.
+ appFixture = await createAppFixture(fixture);
+});
+
+test.afterAll(() => {
+ appFixture.close();
+});
+
+////////////////////////////////////////////////////////////////////////////////
+// 💿 Almost done, now write your failing test case(s) down here Make sure to
+// add a good description for what you expect Remix to do 👇🏽
+////////////////////////////////////////////////////////////////////////////////
+
+test("[description of what you expect it to do]", async ({ page }) => {
+ let app = new PlaywrightFixture(appFixture, page);
+ // You can test any request your app might get using `fixture`.
+ let response = await fixture.requestDocument("/");
+ expect(await response.text()).toMatch("pizza");
+
+ // If you need to test interactivity use the `app`
+ await app.goto("/");
+ await app.clickLink("/burgers");
+ await page.waitForSelector("text=cheeseburger");
+
+ // If you're not sure what's going on, you can "poke" the app, it'll
+ // automatically open up in your browser for 20 seconds, so be quick!
+ // await app.poke(20);
+
+ // Go check out the other tests to see what else you can do.
+});
+
+////////////////////////////////////////////////////////////////////////////////
+// 💿 Finally, push your changes to your fork of Remix and open a pull request!
+////////////////////////////////////////////////////////////////////////////////
diff --git a/integration/catch-boundary-data-test.ts b/integration/catch-boundary-data-test.ts
new file mode 100644
index 0000000000..708f1124e2
--- /dev/null
+++ b/integration/catch-boundary-data-test.ts
@@ -0,0 +1,472 @@
+import { test, expect } from "@playwright/test";
+
+import {
+ createAppFixture,
+ createFixture,
+ js,
+} from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
+
+let fixture: Fixture;
+let appFixture: AppFixture;
+
+let ROOT_BOUNDARY_TEXT = "ROOT_TEXT" as const;
+let LAYOUT_BOUNDARY_TEXT = "LAYOUT_BOUNDARY_TEXT" as const;
+let OWN_BOUNDARY_TEXT = "OWN_BOUNDARY_TEXT" as const;
+
+let NO_BOUNDARY_LOADER_FILE = "/no.loader" as const;
+let NO_BOUNDARY_LOADER = "/no/loader" as const;
+
+let HAS_BOUNDARY_LAYOUT_NESTED_LOADER_FILE =
+ "/yes.loader-layout-boundary" as const;
+let HAS_BOUNDARY_LAYOUT_NESTED_LOADER = "/yes/loader-layout-boundary" as const;
+
+let HAS_BOUNDARY_NESTED_LOADER_FILE = "/yes.loader-self-boundary" as const;
+let HAS_BOUNDARY_NESTED_LOADER = "/yes/loader-self-boundary" as const;
+
+let ROOT_DATA = "root data";
+let LAYOUT_DATA = "root data";
+
+test.describe("ErrorBoundary (thrown responses)", () => {
+ test.beforeEach(async ({ context }) => {
+ await context.route(/_data/, async (route) => {
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ route.continue();
+ });
+ });
+
+ test.beforeAll(async () => {
+ fixture = await createFixture({
+ files: {
+ "app/root.tsx": js`
+ import { json } from "@remix-run/node";
+ import {
+ Links,
+ Meta,
+ Outlet,
+ Scripts,
+ useLoaderData,
+ useMatches,
+ } from "@remix-run/react";
+
+ export const loader = () => json("${ROOT_DATA}");
+
+ export default function Root() {
+ const data = useLoaderData();
+
+ return (
+
+
+
+
+
+
+
{data}
+
+
+
+
+ );
+ }
+
+ export function ErrorBoundary() {
+ let matches = useMatches();
+ let { data } = matches.find(match => match.id === "root");
+
+ return (
+
+