setup jest for nextjs

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["eslint:recommended", "next", "next/core-web-vitals"]
+  "extends": ["eslint:recommended", "next", "next/core-web-vitals"],
+  "env": {
+    "jest/globals": true
+  }
 }

__tests__/Home.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import Home from "@/app/page";
+import '@testing-library/jest-dom'
+
+describe("Test Setup", () => {
+  it("should be true", () => {
+    expect(true).toBe(true);
+  });
+});
+
+// describe("Home Component", () => {
+//   it("renders without crashing", () => {
+//     render(<Home />);
+
+//     // Check if a key element is present, like the page title
+//     // expect(screen.getByText("Explore the world of ventures")).toBeInTheDocument();
+//     expect(true).toBe(true);
+//   });
+// });

jest.config.ts

@@ -0,0 +1,18 @@
+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'],
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
+    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\"",
+    "test": "jest"
   },
   "dependencies": {
     "@hcaptcha/react-hcaptcha": "^1.11.0",
@@ -77,8 +78,12 @@
     "@eslint/js": "^9.13.0",
     "@playwright/test": "^1.47.2",
     "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/eslint__js": "^8.42.3",
+    "@types/jest": "^29.5.14",
     "@types/next": "^8.0.7",
     "@types/node": "^20",
     "@types/react": "^18.3.12",
@@ -91,10 +96,14 @@
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "supabase": "^1.200.3",
     "tailwindcss": "^3.4.1",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0"
   }

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["@testing-library/jest-dom"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,