add unit testing package

__tests__/homepage.tsx

@@ -0,0 +1,33 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import Header from "../components/header";
+import "@testing-library/jest-dom";
+import {useSession} from "next-auth/react";
+
+jest.mock("next-auth/react", () => {
+  const originalModule = jest.requireActual('next-auth/react');
+  const mockSession = {
+    expires: new Date(Date.now() + 2 * 86400).toISOString(),
+    user: { username: "admin" }
+  };
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSession: jest.fn(() => {
+      return {data: mockSession, status: 'authenticated'}
+    }),
+  };
+});
+
+describe("Home", () => {
+  test("Should have a header", async() => {
+    render(<Header />);
+
+    expect(screen.getByText("News app")).toBeInTheDocument();
+  });
+
+  test("Should have logout button", async() => {
+    render(<Header />);
+
+    expect(screen.getByText("Logout")).toBeInTheDocument();
+  })
+});

jest.config.js

@@ -0,0 +1,19 @@
+const nextJest = require('next/jest')
+
+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
+/** @type {import('jest').Config} */
+const customJestConfig = {
+    // Add more setup options before each test is run
+    // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+    // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+    moduleDirectories: ['node_modules', '<rootDir>/'],
+    testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest --watch"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.13",
@@ -17,13 +18,17 @@
     "@radix-ui/react-scroll-area": "^1.0.1",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.3",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",
     "blurhash": "^2.0.4",
     "daisyui": "^2.38.1",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.2",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "jsdom": "^20.0.2",
     "next": "13.0.2",
     "next-auth": "^4.16.3",
@@ -37,6 +42,7 @@
     "typescript": "4.8.4"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
     "@types/jsdom": "^20.0.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.18",