Run all tests in <StrictMode>

- Prevented warnings about legacy context usage from showing up in
<StrictMode>.
- Added a few different builds of React to the repository for running
the tests under different versions of React.

Helps with remix-run#6385 and remix-run#6388

Author: mjackson

.gitignore

@@ -1,5 +1,6 @@
 # node.js
 node_modules/
+!react-builds/*/node_modules/
 npm-debug.log
 
 # lerna

packages/react-router-config/modules/__tests__/integration-test.js

@@ -1,9 +1,10 @@
 import React from "react";
-import ReactDOMServer from "react-dom/server";
 
 import { StaticRouter } from "react-router";
 import { matchRoutes, renderRoutes } from "react-router-config";
 
+import renderToStringStrict from "./utils/renderToStringStrict";
+
 describe("integration", () => {
   it("generates the same matches in renderRoutes and matchRoutes", () => {
     const rendered = [];
@@ -44,11 +45,13 @@ describe("integration", () => {
 
     const pathname = "/pepper/jalepeno";
     const branch = matchRoutes(routes, pathname);
-    ReactDOMServer.renderToString(
+
+    renderToStringStrict(
       <StaticRouter location={pathname} context={{}}>
         {renderRoutes(routes)}
       </StaticRouter>
     );
+
     expect(branch.length).toEqual(2);
     expect(rendered.length).toEqual(2);
     expect(branch[0].match).toEqual(rendered[0]);
@@ -94,7 +97,7 @@ describe("integration", () => {
 
     const pathname = "/ghost";
     const branch = matchRoutes(routes, pathname);
-    ReactDOMServer.renderToString(
+    renderToStringStrict(
       <StaticRouter location={pathname} context={{}}>
         {renderRoutes(routes)}
       </StaticRouter>
@@ -129,7 +132,7 @@ describe("integration", () => {
 
     const pathname = "/pepper";
     const branch = matchRoutes(routes, pathname);
-    ReactDOMServer.renderToString(
+    renderToStringStrict(
       <StaticRouter location={pathname} context={{}}>
         {renderRoutes(routes)}
       </StaticRouter>
@@ -167,17 +170,20 @@ describe("integration", () => {
 
     let pathname = "/pepper";
     let branch = matchRoutes(routes, pathname);
-    ReactDOMServer.renderToString(
+
+    renderToStringStrict(
       <StaticRouter location={pathname} context={{}}>
         {renderRoutes(routes)}
       </StaticRouter>
     );
+
     expect(branch.length).toEqual(0);
     expect(rendered.length).toEqual(0);
 
     pathname = "/pepper/";
     branch = matchRoutes(routes, pathname);
-    ReactDOMServer.renderToString(
+
+    renderToStringStrict(
       <StaticRouter location={pathname} context={{}}>
         {renderRoutes(routes)}
       </StaticRouter>

packages/react-router-config/modules/__tests__/renderRoutes-test.js

@@ -1,11 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import ReactDOMServer from "react-dom/server";
 import createHistory from "history/createMemoryHistory";
 
 import { Router, StaticRouter } from "react-router";
 import { renderRoutes } from "react-router-config";
 
+import renderStrict from "./utils/renderStrict";
+import renderToStringStrict from "./utils/renderToStringStrict";
+
 describe("renderRoutes", () => {
   let renderedRoutes;
   let renderedExtraProps;
@@ -26,7 +28,7 @@ describe("renderRoutes", () => {
     };
     const routes = [routeToMatch];
 
-    ReactDOMServer.renderToString(
+    renderToStringStrict(
       <StaticRouter location="/path" context={{}}>
         {renderRoutes(routes)}
       </StaticRouter>
@@ -42,7 +44,7 @@ describe("renderRoutes", () => {
     const routes = [routeToMatch];
     const extraProps = { anExtraProp: "anExtraPropValue" };
 
-    ReactDOMServer.renderToString(
+    renderToStringStrict(
       <StaticRouter location="/path" context={{}}>
         {renderRoutes(routes, extraProps)}
       </StaticRouter>
@@ -64,7 +66,7 @@ describe("renderRoutes", () => {
     ];
     const extraProps = { anExtraProp: "anExtraPropValue" };
 
-    ReactDOMServer.renderToString(
+    renderToStringStrict(
       <StaticRouter location="/" context={{}}>
         {renderRoutes(routes, extraProps)}
       </StaticRouter>
@@ -86,7 +88,7 @@ describe("renderRoutes", () => {
         }
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
@@ -117,7 +119,7 @@ describe("renderRoutes", () => {
         }
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
@@ -171,7 +173,7 @@ describe("renderRoutes", () => {
         initialEntries: ["/one"]
       });
 
-      ReactDOM.render(
+      renderStrict(
         <Router history={history}>{renderRoutes(routes)}</Router>,
         node
       );
@@ -209,7 +211,7 @@ describe("renderRoutes", () => {
         }
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/two" context={{}}>
           {renderRoutes(routes, {}, { location: { pathname: "/one" } })}
         </StaticRouter>
@@ -241,7 +243,7 @@ describe("renderRoutes", () => {
         routeToMatch
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/path/child" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
@@ -268,12 +270,12 @@ describe("renderRoutes", () => {
         }
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/path/child" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
       );
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
@@ -303,12 +305,12 @@ describe("renderRoutes", () => {
         }
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/path/child/grandchild" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
       );
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/path" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
@@ -339,7 +341,7 @@ describe("renderRoutes", () => {
         routeToMatch
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/path/" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
@@ -366,17 +368,17 @@ describe("renderRoutes", () => {
         }
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/path/child" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
       );
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
       );
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/path" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
@@ -418,16 +420,18 @@ describe("renderRoutes", () => {
         }
       ];
 
-      ReactDOMServer.renderToString(
+      renderToStringStrict(
         <StaticRouter location="/path/child/grandchild" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
       );
-      ReactDOMServer.renderToString(
+
+      renderToStringStrict(
         <StaticRouter location="/path/" context={{}}>
           {renderRoutes(routes)}
         </StaticRouter>
       );
+
       expect(renderedRoutes.length).toEqual(2);
       expect(renderedRoutes[0]).toEqual(routes[1]);
       expect(renderedRoutes[1]).toEqual(routes[1].routes[1]);
@@ -442,11 +446,12 @@ describe("renderRoutes", () => {
       }
     ];
 
-    ReactDOMServer.renderToString(
+    renderToStringStrict(
       <StaticRouter location="/path" context={{}}>
         {renderRoutes(routes)}
       </StaticRouter>
     );
+
     expect(renderedRoutes.length).toEqual(1);
     expect(renderedRoutes[0]).toEqual(routes[0]);
   });

packages/react-router-config/modules/__tests__/utils/StrictMode.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+let StrictMode = function(props) {
+  return props.children || null;
+};
+
+if (React.StrictMode) {
+  StrictMode = React.StrictMode;
+}
+
+export default StrictMode;

packages/react-router-config/modules/__tests__/utils/renderStrict.js

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import StrictMode from "./StrictMode";
+
+function renderStrict(element, node) {
+  return ReactDOM.render(<StrictMode>{element}</StrictMode>, node);
+}
+
+export default renderStrict;

packages/react-router-config/modules/__tests__/utils/renderToStringStrict.js

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOMServer from "react-dom/server";
+
+import StrictMode from "./StrictMode";
+
+function renderToStringStrict(element) {
+  return ReactDOMServer.renderToString(<StrictMode>{element}</StrictMode>);
+}
+
+module.exports = renderToStringStrict;