Started Adding Jest and Tests

.github/workflows/prettier.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '21'
+          node-version: 'latest'
 
       - name: Configure Corepack
         run: corepack enable

.github/workflows/tests.yml

@@ -0,0 +1,34 @@
+name: Run tests and upload coverage
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    name: Run tests and collect coverage
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+
+      - name: Configure Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run tests
+        run: yarn coverage
+
+      - name: Upload results to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -6,6 +6,7 @@
 
 # testing
 /coverage
+/__tests__/__snapshots__
 
 # next.js
 /.next/
@@ -37,3 +38,4 @@ next-env.d.ts
 # other
 /.vscode/
 /.content-collections
+/.swc

__tests__/index.test.tsx

@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import Page from '@/app/(main)/page';
+
+describe('Home', () => {
+  it('renders homepage unchanged', () => {
+    const { container } = render(<Page />);
+    expect(container).toMatchSnapshot();
+  });
+  it('renders a heading', () => {
+    render(<Page />);
+
+    const heading = screen.getByRole('heading', { level: 1 });
+
+    expect(heading).toBeInTheDocument();
+  });
+});

eslint.config.mjs

@@ -22,10 +22,6 @@ export default [
       'react-compiler': reactCompiler,
     },
 
-    rules: {
-      '@next/next/no-duplicate-head': 'off', // Turn off this rule for now as it's giving false positives
-    },
-
     files: ['**/*.ts', '**/*.tsx'],
 
     languageOptions: {

jest.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from 'jest';
+import nextJest from 'next/jest.js';
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const config: Config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+    'content-collections': '<rootDir>/.content-collections/generated',
+  },
+};
+
+export default createJestConfig(config);

jest.setup.ts

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom';
+
+jest.mock('@clerk/nextjs/server', () => {
+  return {
+    auth: jest.fn().mockImplementation(() => {
+      return {
+        run: () => Promise.resolve({ id: '' }),
+      };
+    }),
+  };
+});

package.json

@@ -10,7 +10,9 @@
     "lint": "next lint && tsc --noemit",
     "postinstall": "prisma generate --no-engine",
     "format": "prettier --check --ignore-path .prettierignore .",
-    "format:fix": "prettier --write --ignore-path .prettierignore ."
+    "format:fix": "prettier --write --ignore-path .prettierignore .",
+    "test": "jest",
+    "coverage": "jest --coverage"
   },
   "dependencies": {
     "@arcjet/next": "^1.0.0-alpha.34",
@@ -64,8 +66,12 @@
     "@microsoft/eslint-formatter-sarif": "^3.1.0",
     "@next/eslint-plugin-next": "15.1.3",
     "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@types/compression": "^1.7.5",
     "@types/dompurify": "^3",
+    "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.0",
@@ -79,13 +85,18 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-compiler": "^19.0.0-beta-201e55d-20241215",
     "fluid-tailwind": "^1.0.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mintlify": "^4.0.300",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "prisma": "^6.0.1",
     "tailwindcss": "^3.4.16",
-    "typescript": "^5.6.3"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^2.1.8"
   },
   "packageManager": "yarn@4.5.3"
 }