Initial commit

src/pages/NotFound/__tests__/NotFound.tsx

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+
+import NotFound from "../index"
+
+describe("<NotFound />", () => {
+    it("renders", () => {
+        const tree = render(
+            <MemoryRouter>
+                {/*
+          @ts-expect-error */}
+                <NotFound />
+            </MemoryRouter>
+        ).container.firstChild
+
+        expect(tree).toMatchSnapshot()
+    })
+})

src/pages/NotFound/__tests__/__snapshots__/NotFound.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NotFound /> renders 1`] = `
+<div
+  class="NotFound"
+>
+  <p>
+    Oops, Page was not found!
+  </p>
+</div>
+`;

src/pages/NotFound/index.tsx

@@ -0,0 +1,23 @@
+import { memo } from "react"
+import { RouteComponentProps } from "react-router-dom"
+import { Helmet } from "react-helmet"
+
+import styles from "./styles.module.scss"
+
+type Props = RouteComponentProps
+
+const NotFound = ({ staticContext }: Props) => {
+    // We have to check if staticContext exists
+    // because it will be undefined if rendered through a BrowserRoute
+    /* istanbul ignore next */
+    if (staticContext) staticContext.statusCode = 404
+
+    return (
+        <div className={styles.NotFound}>
+            <Helmet title="Oops" />
+            <p>Oops, Page was not found!</p>
+        </div>
+    )
+}
+
+export default memo(NotFound)

src/pages/NotFound/styles.module.scss

@@ -0,0 +1,3 @@
+.NotFound {
+    padding: 0 15px;
+}