Add 404 page

src/components/404/index.jsx

@@ -0,0 +1,17 @@
+import { Typography } from "@material-ui/core";
+import React from "react";
+import useStyles from '../Styles';
+
+const PageNotFound = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.paper}>
+      <Typography component="h1" variant="h2">
+        Page Not Found
+      </Typography>
+    </div>
+  );
+}
+
+export default PageNotFound;

src/components/App/App.test.js

@@ -19,28 +19,27 @@ const renderRoute = async (route) => {
 
 describe("App", () => {
 
-  it("Route / unauthenticated", async () => {
+  afterEach(() => {
     setToken(null);
+    cleanup();
+  });
+
+  it("Route / unauthenticated", async () => {
     const container = await renderRoute("/");
     expect(container.querySelector("h1").innerHTML).toEqual("Sign in");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route /signup unauthenticated", async () => {
-    setToken(null);
     const container = await renderRoute("/signup");
     expect(container.querySelector("h1").innerHTML).toEqual("Sign up");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route /home unauthenticated", async () => {
-    setToken(null);
     const container = await renderRoute("/home");
     expect(container.querySelector("h1").innerHTML).toEqual("Sign in");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route / authenticated", async () => {
@@ -48,7 +47,6 @@ describe("App", () => {
     const container = await renderRoute("/");
     expect(container.querySelector("h1").innerHTML).toEqual("Upload file");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route /signup authenticated", async () => {
@@ -56,7 +54,6 @@ describe("App", () => {
     const container = await renderRoute("/signup");
     expect(container.querySelector("h1").innerHTML).toEqual("Upload file");
     expect(container).toMatchSnapshot();
-    cleanup();
   });
 
   it("Route /home authenticated", async () => {
@@ -64,7 +61,19 @@ describe("App", () => {
     const container = await renderRoute("/home");
     expect(container.querySelector("h1").innerHTML).toEqual("Upload file");
     expect(container).toMatchSnapshot();
-    cleanup();
+  });
+
+  it("Route /page-not-found unauthenticated", async () => {
+    const container = await renderRoute("/page-not-found");
+    expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Route /page-not-found authenticated", async () => {
+    setToken(TEST_TOKEN);
+    const container = await renderRoute("/page-not-found");
+    expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
+    expect(container).toMatchSnapshot();
   });
 
 })

src/components/App/__snapshots__/App.test.js.snap

@@ -466,6 +466,42 @@ exports[`App Route /home unauthenticated 1`] = `
 </div>
 `;
 
+exports[`App Route /page-not-found authenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-paper-41"
+    >
+      <h1
+        class="MuiTypography-root MuiTypography-h2"
+      >
+        Page Not Found
+      </h1>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /page-not-found unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-paper-37"
+    >
+      <h1
+        class="MuiTypography-root MuiTypography-h2"
+      >
+        Page Not Found
+      </h1>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`App Route /signup authenticated 1`] = `
 <div>
   <div

src/components/Routes/SiteRoutes.jsx

@@ -11,6 +11,7 @@ import { useUserContext }  from '../Contexts/UserContext';
 const SignInForm = React.lazy(() => import('../SignInForm'));
 const SignUpForm = React.lazy(() => import('../SignUpForm'));
 const FileUploadForm = React.lazy(() => import('../FileUploadForm'));
+const PageNotFound = React.lazy(() => import('../404'));
 
 const SiteRoutes = () => {
   const { token } = useUserContext();
@@ -22,6 +23,7 @@ const SiteRoutes = () => {
           <AuthRoute path="/" exact render={() => <SignInForm />} type={TYPES.GUEST} token={token} />
           <AuthRoute path="/signup" exact render={() => <SignUpForm />} type={TYPES.GUEST} token={token} />
           <AuthRoute path="/home" render={() => <FileUploadForm />} type={TYPES.PROTECTED} token={token} />
+          <PageNotFound />
         </Switch>    
       </BrowserRouter>
     </Suspense>