setup test environment

.eslintrc.json

@@ -1,6 +1,17 @@
 {
-  "extends": "next/core-web-vitals",
   "rules": {
     "@next/next/no-img-element": "off"
-  }
-}
+  },
+  "extends": ["next/core-web-vitals"],
+  "plugins": ["testing-library"],
+  "overrides": [
+    // Only uses Testing Library lint rules in test files
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": ["plugin:testing-library/react"]
+    }
+  ]
+}

jest.config.ts

@@ -0,0 +1,17 @@
+import nextJest from "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
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  testEnvironment: "jest-environment-jsdom",
+  moduleDirectories: ["node_modules", "src"],
+  modulePaths: ["<rootDir>"]
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.ts

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build && next export",
+    "test": "jest",
     "start": "next start",
     "lint": "next lint",
     "deploy": "gh-pages -d out -t true"
@@ -22,15 +23,25 @@
     "usehooks-ts": "^2.3.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/dagre": "^0.7.47",
+    "@types/enzyme": "^3.10.11",
+    "@types/jest": "^27.4.0",
     "@types/node": "17.0.13",
     "@types/react": "17.0.38",
     "@types/react-json-editor-ajrm": "^2.5.2",
     "@types/styled-components": "^5.1.21",
+    "babel-jest": "^27.4.6",
+    "enzyme": "^3.11.0",
     "eslint": "8.8.0",
     "eslint-config-next": "12.0.9",
+    "eslint-plugin-testing-library": "^5.0.5",
     "gh-pages": "^3.2.3",
+    "jest": "^27.4.7",
     "prettier": "^2.5.1",
+    "ts-node": "^10.4.0",
     "typescript": "4.5.5"
   }
 }

src/components/__tests__/Button.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Button } from "src/components/Button";
+import { screen, render } from '@testing-library/react';
+
+describe("Button", () => {
+  it("should render Button component", () => {
+    render(<Button>Click Me!</Button>);
+    expect(screen.getByRole('button', { name: /Click Me/ })).toBeInTheDocument();
+  });
+});