Created Unit Test for Frontend Buildcheck Workflow (#1148)

* frontend workflow check

* added new step for installing npm

* added working directory line for frontend

* added specific prettier dev dependency

* prettier dev dependency

* removed prettier dependency

* remove dtest block

* removed test block for now

* changed env for build and stage

* added git dom

* added new test components without sample unit test

* made changes on checkout synatx and removed build

* checking the frontend workflow unit test

* checking the frontend workflow unit test after fixing lint

* frontend yml changes

* 🎨 Auto-generated directory tree for repository in Architecture.md

* removed irrelevant lines

* removed lines

---------

Co-authored-by: prishavall <[email protected]>

.github/Architecture.md

@@ -214,15 +214,19 @@
 |  |  |  |- 📜 about.tsx
 |  |  |  |- 📜 wiki.tsx
 |  |  |  |- 📜 _document.tsx
+|  |  |- 📂 __tests__:
+|  |  |  |- 📂 common:
+|  |  |  |  |- 📂 components:
+|  |  |  |  |  |- 📜 TitleText.test.tsx
 |  |  |- 📜 constants.ts
 |  |  |- 📜 iris.csv : Sample CSV data
 |  |  |- 📜 GlobalStyle.ts
 |  |  |- 📜 next-env.d.ts
 |  |- 📜 .eslintignore
 |  |- 📜 tsconfig.json
 |  |- 📜 .eslintrc.json
+|  |- 📜 jest.config.ts
 |  |- 📜 pnpm-lock.yaml
-|  |- 📜 jest.config.js
 |  |- 📜 package.json
 |  |- 📜 next.config.js
 |  |- 📜 next-env.d.ts

.github/workflows/frontend.yml

@@ -29,16 +29,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
 
       - name: Install pnpm
-        run: npm install -g pnpm
+        run: npm install -g pnpm 
         working-directory: ./frontend
 
       - name: Install
         run: pnpm install --frozen-lockfile
         working-directory: ./frontend
 
       - name: Test
-        run: echo "pnpm run test should be here"
+        run: pnpm test
         working-directory: ./frontend
+
+

.github/workflows/node.js.yml

@@ -47,8 +47,4 @@ jobs:
         run: pnpm lint
         working-directory: ./frontend
 
-      - name: Run depcheck
-        run: npx depcheck --ignore-bin-package
-        working-directory: ./frontend
-
       # future: add yarn build once build errors are resolved

frontend/jest.config.ts

@@ -0,0 +1,22 @@
+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 = {
+  preset: "ts-jest",
+  transform: {
+    "^.+\.tsx?$": "babel-jest",
+  },
+  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)

frontend/package.json

@@ -4,7 +4,9 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "lint": "next lint",
-    "start": "next dev"
+    "start": "next dev",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "keywords": [],
   "author": "",
@@ -56,13 +58,19 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "depcheck": "^1.4.7",
     "eslint": "^8.52.0",
     "eslint-plugin-react": "^7.33.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "3.2.2",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2"
   }
 }