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

) 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 9, 2023 · c50b5ac · c50b5ac
1 parent ee2fc0c
commit c50b5ac
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;