ci: set up GitHub Actions workflow and configure frontend Jest testing

- Add CI pipeline for frontend and backend on push and PR events
- Introduce Jest, React Testing Library, and Babel setup for Vite frontend testing
- Configure CI pipeline to format, lint, test, and build the respective environments
- Add basic smoke test for the  component and mocks for static assets

Author: ManmathX

.github/workflows/ci.yml

@@ -0,0 +1,77 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request:
+    branches:
+      - main
+      - master
+
+jobs:
+  backend:
+    name: Backend CI
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./backend
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+          cache-dependency-path: backend/package-lock.json
+
+      - name: Install dependencies
+        # Uses npm install instead of npm ci in case package-lock.json is missing or out of sync
+        # Though npm ci is preferred in CI if package-lock is present
+        run: npm install
+
+      - name: Check code formatting
+        run: npx prettier --check .
+        continue-on-error: true
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Run tests
+        run: npm test
+
+  frontend:
+    name: Frontend CI
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Check code formatting
+        run: npx prettier --check .
+        continue-on-error: true
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Build project
+        run: npm run build
+
+      - name: Run tests
+        run: npm test

frontend/babel.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }]
+  ],
+};

frontend/jest.config.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/src/__mocks__/fileMock.js'
+  },
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest'
+  }
+};

frontend/package.json

@@ -8,7 +8,8 @@
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "test": "jest"
   },
   "dependencies": {
     "axios": "^1.14.0",
@@ -29,6 +30,16 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
     "prettier": "^3.8.1",
-    "vite": "^8.0.4"
+    "vite": "^8.0.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/user-event": "^14.5.1",
+    "babel-jest": "^29.7.0",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "identity-obj-proxy": "^3.0.0"
   }
 }

frontend/src/App.test.jsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+describe('App', () => {
+  it('renders without crashing', () => {
+    // This is a basic smoke test
+    render(<App />);
+  });
+});

frontend/src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

frontend/src/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';