Configure Jest for unit testing with sample test (#205)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: dkhalife <1736645+dkhalife@users.noreply.github.com>
Co-authored-by: Dany Khalife <dev@dkhalife.com>

Author: Copilot

.gitignore

@@ -6,3 +6,6 @@ node_modules
 
 .yarn/
 .yarnrc.yml
+
+# Test coverage
+coverage

eslint.config.js

@@ -6,7 +6,7 @@ import pluginReact from 'eslint-plugin-react'
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   { files: ['**/*.{ts,tsx}'] },
-  { ignores: ['node_modules', 'dist'] },
+  { ignores: ['node_modules', 'dist', 'coverage'] },
   { languageOptions: { globals: globals.browser } },
   { settings: { react: { version: 'detect' } } },
   pluginJs.configs.recommended,

jest.config.js

@@ -0,0 +1,31 @@
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/main.tsx',
+    '!src/vite.d.ts',
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: {
+          jsx: 'react-jsx',
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+        },
+      },
+    ],
+  },
+}

package.json

@@ -7,7 +7,10 @@
     "start": "vite --host",
     "build": "vite build --mode prod",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
@@ -25,17 +28,26 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
+    "@types/mocha": "^10.0.10",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.18.0",
     "eslint-plugin-react": "^7.37.4",
     "globals": "^15.14.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-react": "^0.0.1",
+    "ts-jest": "^29.4.4",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.19.1",
     "vite": "^6.2.7"

src/Loading.tsx

@@ -20,7 +20,7 @@ export class Loading extends React.Component<LoadingProps, LoadingState> {
   }
 
   componentDidMount() {
-    this.timeout = setTimeout(() => {
+    this.timeout = window.setTimeout(() => {
       this.setState({
         subMessage:
           'This is taking longer than usual. There might be an issue.',

src/sample.test.ts

@@ -0,0 +1,9 @@
+describe('Sample Test Suite', () => {
+  it('should pass', () => {
+    expect(true).toBe(true)
+  })
+
+  it('should perform basic arithmetic', () => {
+    expect(1 + 1).toBe(2)
+  })
+})

src/setupTests.ts

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