Merge pull request #1698 from monocle/upgrade-react-router

Upgrade react-router-dom to 6.11.0. Closes #1634

src/frontend/package.json

@@ -15,7 +15,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/react-redux": "^7.1.25",
-    "@types/react-router-dom": "^5.1.2",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-router-hash-link": "^2.0.0",
     "@types/react-test-renderer": "^18.0.0",
     "@types/redux-mock-store": "^1.0.3",
@@ -30,7 +30,7 @@
     "react-dev-utils": "12.0.1",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^6.11.0",
     "react-router-hash-link": "^2.0.0",
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",

src/frontend/src/components/App/App.test.tsx

@@ -1,9 +1,27 @@
 import React from "react";
-import { BrowserRouter } from "react-router-dom";
+import axios from "axios";
+import { BrowserRouter, MemoryRouter } from "react-router-dom";
+import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
-
+import { render, screen, waitFor } from "@testing-library/react";
+import { createStore } from "../../test/testHelpers";
 import App from ".";
 
+function renderAtRoute(route: string) {
+  // "/rules" requires a server fetch in order to display content
+  jest
+    .spyOn(axios, "request")
+    .mockResolvedValue({ data: { charge_types: [] } });
+
+  render(
+    <Provider store={createStore()}>
+      <MemoryRouter initialEntries={[route]}>
+        <App />
+      </MemoryRouter>
+    </Provider>
+  );
+}
+
 it("renders correctly", () => {
   const tree = renderer
     .create(
@@ -14,3 +32,34 @@ it("renders correctly", () => {
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+describe("App routing", () => {
+  // "/record-search" requires being logged in and is tested elsewhere
+  const routeText = [
+    ["/", "winner"],
+    ["/oeci", "ecourt"],
+    ["/demo-record-search", "app demo"],
+    ["/manual", "introduction"],
+    ["/rules", "type eligibility rules"],
+    ["/faq", "myth"],
+    ["/appendix", "forms to file"],
+    ["/privacy-policy", "what we collect and why"],
+    ["/fill-expungement-forms", "this will fill and download"],
+    ["/partner-interest", "made for organizations to become expungement"],
+    ["/accessibility-statement", "committed to ensuring digital"],
+    ["/about", "collaboration between Code for PDX"],
+    ["/foo", "winner"],
+  ];
+
+  test.each(routeText)(
+    "Route '%s' renders component with content '%s'",
+    async (route, containedText) => {
+      const regex = new RegExp(containedText, "i");
+
+      renderAtRoute(route);
+      await waitFor(() =>
+        expect(screen.getAllByText(regex).length).toBeGreaterThan(0)
+      );
+    }
+  );
+});