#7 Adds Jest for testing

.husky/pre-commit

@@ -1,3 +1,4 @@
 git add -A
 npm run format:staged
-npm run lint
+npm run lint
+npm run test

.prettierignore

@@ -3,4 +3,5 @@ public/
 .gitignore
 .husky/
 .next/
-./node_modules/
+node_modules/
+__tests__/__snapshots__

__tests__/__snapshots__/snapshot.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders homepage unchanged 1`] = `
+<div>
+  <div
+    class="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"
+  >
+    <main
+      class="flex flex-col gap-8 row-start-2 items-center sm:items-start"
+    >
+      <img
+        alt="Next.js logo"
+        class="dark:invert"
+        data-nimg="1"
+        decoding="async"
+        height="38"
+        src="/next.svg"
+        style="color: transparent;"
+        width="180"
+      />
+      <ol
+        class="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]"
+      >
+        <li
+          class="mb-2"
+        >
+          Get started by editing
+
+          <code
+            class="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold"
+          >
+            src/app/page.tsx
+          </code>
+          .
+        </li>
+        <li>
+          Save and see your changes instantly.
+        </li>
+      </ol>
+      <div
+        class="flex gap-4 items-center flex-col sm:flex-row"
+      >
+        <a
+          class="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img
+            alt="Vercel logomark"
+            class="dark:invert"
+            data-nimg="1"
+            decoding="async"
+            height="20"
+            loading="lazy"
+            src="/vercel.svg"
+            style="color: transparent;"
+            width="20"
+          />
+          Deploy now
+        </a>
+        <a
+          class="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Read our docs
+        </a>
+      </div>
+    </main>
+    <footer
+      class="row-start-3 flex gap-6 flex-wrap items-center justify-center"
+    >
+      <a
+        class="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="File icon"
+          aria-hidden="true"
+          data-nimg="1"
+          decoding="async"
+          height="16"
+          loading="lazy"
+          src="/file.svg"
+          style="color: transparent;"
+          width="16"
+        />
+        Learn
+      </a>
+      <a
+        class="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Window icon"
+          aria-hidden="true"
+          data-nimg="1"
+          decoding="async"
+          height="16"
+          loading="lazy"
+          src="/window.svg"
+          style="color: transparent;"
+          width="16"
+        />
+        Examples
+      </a>
+      <a
+        class="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Globe icon"
+          aria-hidden="true"
+          data-nimg="1"
+          decoding="async"
+          height="16"
+          loading="lazy"
+          src="/globe.svg"
+          style="color: transparent;"
+          width="16"
+        />
+        Go to nextjs.org →
+      </a>
+    </footer>
+  </div>
+</div>
+`;

__tests__/page.test.jsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import Page from '../src/app/page'
+
+describe('Page', () => {
+  it('renders a main', () => {
+    render(<Page />)
+
+    const heading = screen.getByRole('main')
+
+    expect(heading).toBeInTheDocument()
+  })
+})

__tests__/snapshot.js

@@ -0,0 +1,7 @@
+import { render } from '@testing-library/react'
+import Page from '../src/app/page'
+
+it('renders homepage unchanged', () => {
+  const { container } = render(<Page />)
+  expect(container).toMatchSnapshot()
+})

jest.config.ts

@@ -0,0 +1,23 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './'
+})
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    // ...
+    '^@/components/(.*)$': '<rootDir>/components/$1'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'