remix-run · brophdawg11 · Aug 12, 2025 · Aug 12, 2025
diff --git a/packages/react-router/__tests__/dom/concurrent-mode-navigations-test.tsx b/packages/react-router/__tests__/dom/concurrent-mode-navigations-test.tsx
@@ -17,9 +17,9 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { JSDOM } from "jsdom";
 import { createDeferred } from "../router/utils/utils";
 import getHtml from "../utils/getHtml";
+import getWindow from "../utils/getWindow";
 
 describe("Handles concurrent mode features during navigations", () => {
   function getComponents() {
@@ -149,7 +149,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <BrowserRouter window={getWindowImpl("/", false)}>
+        <BrowserRouter window={getWindow("/", false)}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route
@@ -181,7 +181,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <HashRouter window={getWindowImpl("/", true)}>
+        <HashRouter window={getWindow("/", true)}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route
@@ -306,7 +306,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <BrowserRouter window-={getWindowImpl("/", true)}>
+        <BrowserRouter window-={getWindow("/", true)}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
@@ -324,7 +324,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <HashRouter window-={getWindowImpl("/", true)}>
+        <HashRouter window-={getWindow("/", true)}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
@@ -356,10 +356,3 @@ describe("Handles concurrent mode features during navigations", () => {
     });
   });
 });
-
-function getWindowImpl(initialUrl: string, isHash = false): Window {
-  // Need to use our own custom DOM in order to get a working history
-  const dom = new JSDOM(`<!DOCTYPE html>`, { url: "http://localhost/" });
-  dom.window.history.replaceState(null, "", (isHash ? "#" : "") + initialUrl);
-  return dom.window as unknown as Window;
-}
diff --git a/packages/react-router/__tests__/dom/data-browser-router-legacy-formdata-test.tsx b/packages/react-router/__tests__/dom/data-browser-router-legacy-formdata-test.tsx
@@ -1,4 +1,3 @@
-import { JSDOM } from "jsdom";
 // Drop support for the submitter parameter, as in a legacy browser. This
 // needs to be done before react-router-dom is required, since it does some
 // FormData detection.
@@ -14,13 +13,14 @@ import {
   createHashRouter,
   createRoutesFromElements,
 } from "../../index";
+import getWindow from "../utils/getWindow";
 
 testDomRouter("<DataBrowserRouter>", createBrowserRouter, (url) =>
-  getWindowImpl(url, false),
+  getWindow(url, false),
 );
 
 testDomRouter("<DataHashRouter>", createHashRouter, (url) =>
-  getWindowImpl(url, true),
+  getWindow(url, true),
 );
 
 function testDomRouter(
@@ -120,10 +120,3 @@ function testDomRouter(
     });
   });
 }
-
-function getWindowImpl(initialUrl: string, isHash = false): Window {
-  // Need to use our own custom DOM in order to get a working history
-  const dom = new JSDOM(`<!DOCTYPE html>`, { url: "http://localhost/" });
-  dom.window.history.replaceState(null, "", (isHash ? "#" : "") + initialUrl);
-  return dom.window as unknown as Window;
-}
diff --git a/packages/react-router/__tests__/dom/data-browser-router-test.tsx b/packages/react-router/__tests__/dom/data-browser-router-test.tsx
@@ -5,7 +5,6 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { JSDOM } from "jsdom";
 import * as React from "react";
 import type {
   RouteObject,
@@ -41,14 +40,15 @@ import {
 } from "../../index";
 
 import getHtml from "../utils/getHtml";
+import getWindow from "../utils/getWindow";
 import { createDeferred, tick } from "../router/utils/utils";
 
 testDomRouter("<DataBrowserRouter>", createBrowserRouter, (url) =>
-  getWindowImpl(url, false),
+  getWindow(url, false),
 );
 
 testDomRouter("<DataHashRouter>", createHashRouter, (url) =>
-  getWindowImpl(url, true),
+  getWindow(url, true),
 );
 
 function testDomRouter(
@@ -8002,10 +8002,3 @@ function testDomRouter(
     }
   });
 }
-
-function getWindowImpl(initialUrl: string, isHash = false): Window {
-  // Need to use our own custom DOM in order to get a working history
-  const dom = new JSDOM(`<!DOCTYPE html>`, { url: "http://localhost/" });
-  dom.window.history.replaceState(null, "", (isHash ? "#" : "") + initialUrl);
-  return dom.window as unknown as Window;
-}
diff --git a/packages/react-router/__tests__/dom/flush-sync-navigations-test.tsx b/packages/react-router/__tests__/dom/flush-sync-navigations-test.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { JSDOM } from "jsdom";
 
 import {
   createBrowserRouter,
@@ -9,6 +8,7 @@ import {
   useFetcher,
 } from "../../index";
 import { RouterProvider } from "../../lib/dom-export/dom-router-provider";
+import getWindow from "../utils/getWindow";
 
 describe("flushSync", () => {
   it("wraps useNavigate updates in flushSync when specified", async () => {
@@ -42,7 +42,7 @@ describe("flushSync", () => {
         },
       ],
       {
-        window: getWindowImpl("/"),
+        window: getWindow("/"),
       },
     );
     render(<RouterProvider router={router} />);
@@ -116,7 +116,7 @@ describe("flushSync", () => {
         },
       ],
       {
-        window: getWindowImpl("/"),
+        window: getWindow("/"),
       },
     );
     render(<RouterProvider router={router} />);
@@ -176,7 +176,7 @@ describe("flushSync", () => {
         },
       ],
       {
-        window: getWindowImpl("/"),
+        window: getWindow("/"),
       },
     );
     render(<RouterProvider router={router} />);
@@ -239,7 +239,7 @@ describe("flushSync", () => {
         },
       ],
       {
-        window: getWindowImpl("/"),
+        window: getWindow("/"),
       },
     );
     render(<RouterProvider router={router} />);
@@ -267,10 +267,3 @@ describe("flushSync", () => {
     router.dispose();
   });
 });
-
-function getWindowImpl(initialUrl: string, isHash = false): Window {
-  // Need to use our own custom DOM in order to get a working history
-  const dom = new JSDOM(`<!DOCTYPE html>`, { url: "http://localhost/" });
-  dom.window.history.replaceState(null, "", (isHash ? "#" : "") + initialUrl);
-  return dom.window as unknown as Window;
-}
diff --git a/packages/react-router/__tests__/dom/nav-link-active-test.tsx b/packages/react-router/__tests__/dom/nav-link-active-test.tsx
@@ -1,6 +1,5 @@
 import { render, fireEvent, waitFor, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { JSDOM } from "jsdom";
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
 import {
@@ -14,6 +13,7 @@ import {
   createBrowserRouter,
   createRoutesFromElements,
 } from "../../index";
+import getWindow from "../utils/getWindow";
 
 describe("NavLink", () => {
   describe("when it does not match", () => {
@@ -1062,10 +1062,3 @@ function createDeferred() {
     reject,
   };
 }
-
-function getWindow(initialUrl: string): Window {
-  // Need to use our own custom DOM in order to get a working history
-  const dom = new JSDOM(`<!DOCTYPE html>`, { url: "https://remix.run/" });
-  dom.window.history.replaceState(null, "", initialUrl);
-  return dom.window as unknown as Window;
-}
diff --git a/packages/react-router/__tests__/dom/scroll-restoration-test.tsx b/packages/react-router/__tests__/dom/scroll-restoration-test.tsx
@@ -1,9 +1,9 @@
-import { JSDOM } from "jsdom";
 import * as React from "react";
 import { render, fireEvent, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import getHtml from "../utils/getHtml";
+import getWindow from "../utils/getWindow";
 import {
   Link,
   Outlet,
@@ -22,7 +22,7 @@ describe(`ScrollRestoration`, () => {
       .spyOn(console, "warn")
       .mockImplementation(() => {});
 
-    let testWindow = getWindowImpl("/base");
+    let testWindow = getWindow("/base");
     const mockScroll = jest.fn();
     window.scrollTo = mockScroll;
 
@@ -76,7 +76,7 @@ describe(`ScrollRestoration`, () => {
 
   it("removes the basename from the location provided to getKey", () => {
     let getKey = jest.fn(() => "mykey");
-    let testWindow = getWindowImpl("/base");
+    let testWindow = getWindow("/base");
     window.scrollTo = () => {};
 
     let router = createBrowserRouter(
@@ -131,7 +131,7 @@ describe(`ScrollRestoration`, () => {
       .spyOn(console, "warn")
       .mockImplementation(() => {});
 
-    let testWindow = getWindowImpl("/base");
+    let testWindow = getWindow("/base");
     const mockScroll = jest.fn();
     window.scrollTo = mockScroll;
 
@@ -346,10 +346,3 @@ const testPages = [
     },
   },
 ];
-
-function getWindowImpl(initialUrl: string): Window {
-  // Need to use our own custom DOM in order to get a working history
-  const dom = new JSDOM(`<!DOCTYPE html>`, { url: "http://localhost/" });
-  dom.window.history.replaceState(null, "", initialUrl);
-  return dom.window as unknown as Window;
-}
diff --git a/packages/react-router/__tests__/dom/special-characters-test.tsx b/packages/react-router/__tests__/dom/special-characters-test.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable jest/expect-expect */
 
-import { JSDOM } from "jsdom";
 import * as React from "react";
 import {
   cleanup,
@@ -28,6 +27,7 @@ import {
   useNavigate,
   useParams,
 } from "../../index";
+import getWindow from "../utils/getWindow";
 import getHtml from "../utils/getHtml";
 
 /**
@@ -160,12 +160,7 @@ describe("special character tests", () => {
       expectedLocation: Omit<Location, "state" | "key">,
       expectedParams = {},
     ) {
-      // Need to use our own custom DOM in order to get a working history
-      const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`, {
-        url: "https://remix.run/",
-      });
-      let testWindow = dom.window as unknown as Window;
-      testWindow.history.replaceState(null, "", navigatePath);
+      let testWindow = getWindow(navigatePath);
 
       function Comp({ heading }) {
         return (
@@ -618,13 +613,7 @@ describe("special character tests", () => {
       expectedLocation: Omit<Location, "state" | "key">,
       expectedParams = {},
     ) {
-      // Need to use our own custom DOM in order to get a working history
-      const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`, {
-        url: "https://remix.run/",
-      });
-      let testWindow = dom.window as unknown as Window;
-      testWindow.history.replaceState(null, "", path);
-
+      let testWindow = getWindow(path);
       let renderedUseLocation: Omit<Location, "state" | "key"> | null = null;
       let renderedParams: Params<string> | null = null;
 
@@ -1112,13 +1101,3 @@ describe("special character tests", () => {
     });
   });
 });
-
-function getWindow(initialPath) {
-  // Need to use our own custom DOM in order to get a working history
-  const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`, {
-    url: "https://remix.run/",
-  });
-  let testWindow = dom.window as unknown as Window;
-  testWindow.history.pushState({}, "", initialPath);
-  return testWindow;
-}