update tests that need router data

src/components/AuthenticatedRoute.tsx

@@ -1,11 +1,16 @@
-import { Redirect, Route, RouteComponentProps } from "react-router-dom";
+import {
+  Redirect,
+  Route,
+  RouteComponentProps,
+  RouteProps,
+} from "react-router-dom";
 import { PATH_CHOOSE_TEAM, PATH_LOGIN } from "../routes";
 import { Auth } from "../support";
 
 type Props = {
-  allowNoTeam: boolean;
-  component: React.FC<RouteComponentProps>;
-};
+  allowNoTeam?: boolean;
+  component: React.ComponentType<RouteComponentProps>;
+} & RouteProps;
 
 const AuthenticatedRoute: React.FC<Props> = ({
   allowNoTeam,
@@ -28,26 +33,3 @@ const AuthenticatedRoute: React.FC<Props> = ({
   />
 );
 export default AuthenticatedRoute;
-
-// export default function AuthentictedRoute({
-//   allowNoTeam,
-//   component: Component,
-//   ...rest
-// }: any) {
-//   return (
-//     <Route
-//       {...rest}
-//       render={(props) => {
-//         if (!Auth.isLoggedIn()) {
-//           return <Redirect to={PATH_LOGIN} />;
-//         }
-
-//         if (Auth.hasTeam() || allowNoTeam) {
-//           return <Component {...props} />;
-//         }
-
-//         return <Redirect to={PATH_CHOOSE_TEAM} />;
-//       }}
-//     />
-//   );
-// }

src/modules/login/FinishForgotPasswordPage.spec.tsx

@@ -2,9 +2,9 @@ import { GraphQLError } from "graphql";
 import { MUTATION_NEW_PASSWORD } from "./FinishForgotPasswordPage";
 import { RouterBypassFinishForgotPasswordPage as FinishForgotPasswordPage } from "./index";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
-import { createBrowserHistory } from "history";
 import { makeFC, setComponent } from "../../support/testing/testComponent";
 import { dataDecorator } from "../../support/testing/testDecorators";
+import { createRouterProps } from "../../spec_helper";
 
 let mutationCalled = false;
 const mocks = [
@@ -58,14 +58,8 @@ describe("<FinishForgotPasswordPage />", () => {
     {
       decorators: [dataDecorator(mocks)],
       props: {
+        ...createRouterProps(),
         location: createLocationWithToken("19810531"),
-        history: createBrowserHistory(),
-        match: {
-          params: "",
-          isExact: false,
-          path: "",
-          url: "",
-        },
       },
     },
   );

src/modules/manage-team/ManageTeamPage.spec.tsx

@@ -3,6 +3,7 @@ import { ManageTeamPage } from "./ManageTeamPage";
 import { screen } from "@testing-library/react";
 import { makeFC, setComponent } from "../../support/testing/testComponent";
 import { routingDecorator } from "../../support/testing/testDecorators";
+import { createRouterProps } from "../../spec_helper";
 
 describe("<ManageTeamPage/>", () => {
   let history: MemoryHistory;
@@ -13,7 +14,10 @@ describe("<ManageTeamPage/>", () => {
 
   beforeEach(() => {
     history = createMemoryHistory();
-    setProps({ history });
+    setProps({
+      ...createRouterProps(),
+      history,
+    });
 
     renderComponent();
   });

src/modules/manage-team/ManageTeamPage.tsx

@@ -1,7 +1,6 @@
 import { Component, MouseEvent } from "react";
 
-import { History } from "history";
-import { Route, Switch, withRouter } from "react-router-dom";
+import { Route, RouteComponentProps, Switch } from "react-router-dom";
 
 import s from "./ManageTeamPage.module.scss";
 import {
@@ -19,15 +18,11 @@ import { PATH_MANAGE_TEAM } from "../../routes";
 import { Card } from "../../ui/Card";
 import IntegrationSections from "./sections/integrations/Integrations";
 
-export interface Props {
-  history: History;
-}
-
 export interface State {
   activeItem: string;
 }
 
-export class ManageTeamPage extends Component<Props, State> {
+export class ManageTeamPage extends Component<RouteComponentProps, State> {
   sections: { icon: string; name: string }[] = [
     { icon: "settings", name: "general" },
     { icon: "steps", name: "guidelines" },
@@ -37,7 +32,7 @@ export class ManageTeamPage extends Component<Props, State> {
     { icon: "move_up", name: "integrations" },
   ];
 
-  constructor(props: Props) {
+  constructor(props: RouteComponentProps) {
     super(props);
 
     const location = props.history.location.pathname;
@@ -118,5 +113,4 @@ export class ManageTeamPage extends Component<Props, State> {
   }
 }
 
-// @ts-ignore
-export default withRouter(ManageTeamPage);
+export default ManageTeamPage;

src/modules/user/UserPage.spec.tsx

@@ -1,6 +1,6 @@
 import { createMemoryHistory, MemoryHistory } from "history";
 import { DISCONNECT_SLACK, GET_USER, UserPage } from "./UserPage";
-import { mockLocalstorage } from "../../spec_helper";
+import { createRouterProps, mockLocalstorage } from "../../spec_helper";
 import { PATH_RESET_PASSWORD } from "../../routes";
 import { screen, waitFor, within } from "@testing-library/react";
 import { makeFC, setComponent } from "../../support/testing/testComponent";
@@ -71,7 +71,10 @@ describe("<UserPage/>", () => {
   const original = window;
   beforeEach(() => {
     history = createMemoryHistory();
-    setProps({ history });
+    setProps({
+      ...createRouterProps(),
+      history,
+    });
 
     window = Object.create(window);
     const url = "http://dummy.com";

src/modules/user/UserPage.tsx

@@ -1,8 +1,7 @@
 import { Component } from "react";
 import { Query } from "@apollo/client/react/components";
 import { gql } from "@apollo/client";
-import { withRouter } from "react-router-dom";
-import { History } from "history";
+import { RouteComponentProps } from "react-router-dom";
 import { toast } from "react-toastify";
 
 import { Auth } from "../../support";
@@ -59,22 +58,18 @@ export interface GetUserResult {
   };
 }
 
-export interface Props {
-  history: History;
-}
-
 export interface State {
   // Future state vars go here
 }
 
-export class UserPage extends Component<Props, State> {
+export class UserPage extends Component<RouteComponentProps, State> {
   slackConnectUrl = `${settings.API_BASE_URL}/auth/slack/user/${Storage.getItem(
     settings.USER_ID_TOKEN,
   )}`;
 
   slackIconPath = `${process.env.PUBLIC_URL}/assets/slack_logo.png`;
 
-  constructor(props: Props) {
+  constructor(props: RouteComponentProps) {
     super(props);
 
     const parsed = queryString.parse(this.props.history.location.search);
@@ -146,5 +141,4 @@ export class UserPage extends Component<Props, State> {
   }
 }
 
-// @ts-ignore
-export default withRouter(UserPage);
+export default UserPage;

src/spec_helper.tsx

@@ -1,4 +1,6 @@
 import { InMemoryCache } from "@apollo/client/cache";
+import { createMemoryHistory } from "history";
+import { RouteComponentProps } from "react-router-dom";
 
 export const wait = (amount = 0) =>
   new Promise((resolve) => setTimeout(resolve, amount));
@@ -13,6 +15,22 @@ export type MockedFunction<Func extends (...args: any[]) => any> = jest.Mock<
   Parameters<Func>
 >;
 
+export const createRouterProps = (): RouteComponentProps => ({
+  location: {
+    search: "",
+    pathname: "",
+    state: "",
+    hash: "",
+  },
+  history: createMemoryHistory(),
+  match: {
+    params: "",
+    isExact: false,
+    path: "",
+    url: "",
+  },
+});
+
 export const getMockCache = () =>
   new InMemoryCache({
     typePolicies: {