test(react-router-dom): streamline jsdom submitter bug workaround

Work around the submitter bug in just one place, and link to my jsdom PR which will fix it, so that the workaround can be removed sooner rather than later 🤞 This workaround refactor also establishes a pattern for other jsdom bug polyfills which will be landing in forthcoming RR PRs (the bugs aren't relevant in the current test suite, but will be in the PRs 😅)
remix-run · Jan 6, 2023 · 168e557 · 168e557
1 parent ee2fc0c
commit 168e557
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 70 deletions.
diff --git a/.changeset/slow-trees-notice.md b/.changeset/slow-trees-notice.md
@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Streamline jsdom bug workaround in tests
diff --git a/contributors.yml b/contributors.yml
@@ -74,6 +74,7 @@
 - JakubDrozd
 - janpaepke
 - jasonpaulos
+- jenseng
 - JesusTheHun
 - jimniels
 - jmargeta

diff --git a/packages/react-router-dom/__tests__/data-browser-router-test.tsx b/packages/react-router-dom/__tests__/data-browser-router-test.tsx
@@ -1506,14 +1506,7 @@ function testDomRouter(
       function Comp() {
         let location = useLocation();
         return (
-          <Form
-            onSubmit={(e) => {
-              // jsdom doesn't handle submitter so we add it here
-              // See https://github.com/jsdom/jsdom/issues/3117
-              // @ts-expect-error
-              e.nativeEvent.submitter = e.currentTarget.querySelector("button");
-            }}
-          >
+          <Form>
             <p>{location.pathname + location.search}</p>
             <input name="a" defaultValue="1" />
             <button type="submit" name="b" value="2">
@@ -1587,15 +1580,7 @@ function testDomRouter(
         let location = useLocation();
         let data = useActionData() as string | undefined;
         return (
-          <Form
-            method="post"
-            onSubmit={(e) => {
-              // jsdom doesn't handle submitter so we add it here
-              // See https://github.com/jsdom/jsdom/issues/3117
-              // @ts-expect-error
-              e.nativeEvent.submitter = e.currentTarget.querySelector("button");
-            }}
-          >
+          <Form method="post">
             <p>{location.pathname + location.search}</p>
             {data && <p>{data}</p>}
             <input name="a" defaultValue="1" />
@@ -1683,16 +1668,7 @@ function testDomRouter(
         let navigation = useNavigation();
         return (
           <div>
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="test" value="value" />
               <button type="submit" formMethod="get">
                 Submit Form
@@ -2501,16 +2477,7 @@ function testDomRouter(
 
         function FormPage() {
           return (
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="a" defaultValue="1" />
               <input name="b" defaultValue="2" />
               <button name="c" value="3" type="submit">
@@ -2538,16 +2505,7 @@ function testDomRouter(
         function FormPage() {
           let submit = useSubmit();
           return (
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="a" defaultValue="1" />
               <input name="b" defaultValue="2" />
               <button
@@ -2581,16 +2539,7 @@ function testDomRouter(
 
         function FormPage() {
           return (
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="a" defaultValue="1" />
               <input name="b" defaultValue="2" />
               <button name="b" value="3" type="submit">
@@ -2617,16 +2566,7 @@ function testDomRouter(
         function FormPage() {
           let submit = useSubmit();
           return (
-            <Form
-              method="post"
-              onSubmit={(e) => {
-                // jsdom doesn't handle submitter so we add it here
-                // See https://github.com/jsdom/jsdom/issues/3117
-                // @ts-expect-error
-                e.nativeEvent.submitter =
-                  e.currentTarget.querySelector("button");
-              }}
-            >
+            <Form method="post">
               <input name="a" defaultValue="1" />
               <input name="b" defaultValue="2" />
               <button
@@ -3104,9 +3044,6 @@ function testDomRouter(
           </TestDataRouter>
         );
 
-        // Note: jsdom doesn't properly attach event.submitter for
-        // <button type="submit"> clicks, so we have to use an input to drive
-        // this.  See https://github.com/jsdom/jsdom/issues/3117
         function Comp() {
           let fetcher = useFetcher();
           return (

diff --git a/packages/react-router-dom/__tests__/polyfills/SubmitEvent.submitter.ts b/packages/react-router-dom/__tests__/polyfills/SubmitEvent.submitter.ts
@@ -0,0 +1,26 @@
+// Polyfill jsdom SubmitEvent.submitter, until https://github.com/jsdom/jsdom/pull/3481 is merged
+if (
+  typeof SubmitEvent === "undefined" ||
+  !SubmitEvent.prototype.hasOwnProperty("submitter")
+) {
+  let maybeSubmitter;
+  window.addEventListener(
+    "click",
+    (event) => {
+      if ((event.target as any)?.form) maybeSubmitter = event.target;
+      setImmediate(() => {
+        // if this click doesn't imminently trigger a submit event, then forget it
+        maybeSubmitter = undefined;
+      });
+    },
+    { capture: true }
+  );
+  window.addEventListener(
+    "submit",
+    (event: any) => {
+      if (maybeSubmitter?.form === event.target)
+        event.submitter = maybeSubmitter;
+    },
+    { capture: true }
+  );
+}
diff --git a/packages/react-router-dom/__tests__/setup.ts b/packages/react-router-dom/__tests__/setup.ts
@@ -1,5 +1,7 @@
 import { fetch, Request, Response } from "@remix-run/web-fetch";
 
+import "./polyfills/SubmitEvent.submitter";
+
 // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#configuring-your-testing-environment
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;