setup jest

Author: Dan-Y-Ko

.eslintrc.json

@@ -27,7 +27,8 @@
     "@typescript-eslint/naming-convention": [
       "error",
       {
-        "selector": "interface", "format": ["PascalCase"]
+        "selector": "interface",
+        "format": ["PascalCase"]
       }
     ],
     "react/jsx-pascal-case": 2,

jest.config.mjs

@@ -0,0 +1,30 @@
+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
+/** @type {import('jest').Config} */
+const sharedConfig = {
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  coveragePathIgnorePatterns: ["<rootDir>/build/", "<rootDir>/node_modules/"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+};
+
+const clientTestConfig = {
+  ...sharedConfig,
+  testEnvironment: "jest-environment-jsdom",
+  testMatch: ["**/src/{app,components,store}/**/*.test.ts?(x)"],
+};
+
+const config = {
+  // Add more setup options before each test is run
+  projects: [await createJestConfig(clientTestConfig)()],
+};
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default config;

jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

package.json

@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "prettier": "prettier . --write",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test": "jest --watch"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
@@ -19,6 +20,8 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.4.12",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
     "@types/node": "20.4.5",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
@@ -33,6 +36,8 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-react": "^7.33.1",
     "husky": "^8.0.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "postcss": "8.4.27",
     "prettier": "^3.0.1",
     "tailwindcss": "3.3.3",

src/app/counter/counter.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import CounterPage from "./page";
+
+it("should render the component", () => {
+  render(<CounterPage />);
+
+  const button = screen.getByRole("button", { name: "+" });
+
+  expect(button).toBeInTheDocument();
+});

tsconfig.json

@@ -23,6 +23,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "jest.config.mjs"],
   "exclude": ["node_modules"]
 }