Add a footer and a couple tests - Snapshot Test Example

Testing.MD

@@ -0,0 +1,15 @@
+# Testing
+
+## TDD - Test Driven Development
+
+## Types of Test
+
+- Smoke Tests
+  - Does it exist
+- Unit Tests
+  - Testing each item in isolation
+- Snapshot Tests
+  - Freeze it / i like it today
+- Visual / UI Snapshot
+  - Percy.IO
+  - etc

__tests__/__snapshots__/header.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header Looks Great 1`] = `
+<DocumentFragment>
+  <nav>
+    Platform Starter
+    <a
+      href="/login"
+    >
+      Login
+    </a>
+  </nav>
+</DocumentFragment>
+`;

__tests__/footer.test.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+import Footer from "../src/components/Footer";
+
+describe("Footer", () => {
+  it("Has correct year", () => {
+    // const MockFooter = () => <footer>2022</footer>;
+    const {getByText} = render(<Footer />)
+    // const { getByText } = render(<MockFooter />);
+    expect(getByText(2022)).toBeTruthy();
+  });
+});

__tests__/header.test.tsx

@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import Header from "../src/components/Header";
+
+describe("Header", () => {
+  it("Looks Great", () => {
+    const { asFragment } = render(<Header />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

pages/_app.tsx

@@ -1,6 +1,14 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import Footer from "../src/components/Footer";
+import Header from "../src/components/Header";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Header />
+      <Component {...pageProps} />
+      <Footer />
+    </>
+  );
 }

src/components/Footer.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Footer() {
+  return (
+    <div>2022</div>
+  )
+}
+
+export default Footer

src/components/Header.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+import React from "react";
+
+function Header() {
+  return (
+    <nav>
+      Platform Starter
+      <Link href="/login">Login</Link>
+    </nav>
+  );
+}
+
+export default Header;

tsconfig.json

@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "__tests__/firstTest.test.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "__tests__/firstTest.test.jsx"],
   "exclude": ["node_modules"]
 }