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 😅)

Author: jenseng

.changeset/slow-trees-notice.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Streamline jsdom bug workaround in tests

contributors.yml

@@ -74,6 +74,7 @@
 - JakubDrozd
 - janpaepke
 - jasonpaulos
+- jenseng
 - JesusTheHun
 - jimniels
 - jmargeta

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 (

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 }
+  );
+}

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;