feat(tests): added comprehensive test setup

- Configured Jest environment for React components and JSDOM
- Added setupTests with necessary mocks for Google, Framer Motion
- Implemented detailed test suite for MetaVersion, checkFileType, and s3GeneratePresignedUrl

.github/workflows/main.yml

@@ -39,11 +39,52 @@ jobs:
       - name: Prettier Check
         run: pnpm run prettier-check
 
+  Test:
+    name: Run Tests
+    runs-on: ubuntu-latest
+    needs: [Prettier-check]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        id: cache-primes
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Setup PNPM environment
+        if: steps.cache-primes.outputs.cache-hit != 'true'
+        run: |
+          npm install -g pnpm@latest
+          pnpm config set store-dir ~/.pnpm-store
+
+      - name: Cache PNPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-v3-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-v3-
+
+      - name: Install dependencies
+        if: steps.cache-primes.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Tests
+        run: pnpm run test:ci
+
+      - name: Upload coverage
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/lcov.info
+          fail_ci_if_error: true
+          verbose: true
 
   Build:
     name: Build project
     runs-on: ubuntu-latest
-    needs: [ Prettier-check ]
+    needs: [Prettier-check, Test]
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3
@@ -73,3 +114,19 @@ jobs:
 
       - name: Build
         run: pnpm run build
+
+  Status-Check:
+    name: Status Check
+    runs-on: ubuntu-latest
+    needs: [Prettier-check, Test, Build]
+    if: always()
+    steps:
+      - name: Check status
+        run: |
+          if [ "${{ needs.Prettier-check.result }}" != "success" ] || \
+             [ "${{ needs.Test.result }}" != "success" ] || \
+             [ "${{ needs.Build.result }}" != "success" ]; then
+            echo "One or more jobs failed"
+            exit 1
+          fi
+          echo "All jobs passed successfully"

.gitignore

@@ -18,3 +18,5 @@ storybook-static
 # public folder temp files
 public
 /stories/Uploader.stories.js
+
+coverage

jest.config.cjs

@@ -0,0 +1,41 @@
+/** @type {import('jest').Config} */
+module.exports = {
+    roots: ['<rootDir>/src'],
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    moduleNameMapper: {
+        '^frontend/(.*)$': '<rootDir>/src/frontend/$1',
+        '^backend/(.*)$': '<rootDir>/src/backend/$1',
+        '^lib/(.*)$': '<rootDir>/src/lib/$1',
+        '\\.css$': 'identity-obj-proxy',
+        '^@/(.*)$': '<rootDir>/src/$1',
+    },
+    transform: {
+        '^.+\\.(t|j)sx?$': [
+            'ts-jest',
+            {
+                tsconfig: 'tsconfig.json',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!(@mui|framer-motion)/)'],
+    testMatch: [
+        '<rootDir>/src/**/__tests__/**/*.{ts,tsx}',
+        '<rootDir>/src/**/*.{spec,test}.{ts,tsx}',
+    ],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    collectCoverageFrom: [
+        'src/**/*.{ts,tsx}',
+        '!src/**/*.stories.{ts,tsx}',
+        '!src/**/*.d.ts',
+        '!src/version.ts',
+    ],
+    coverageThreshold: {
+        global: {
+            branches: 1,
+            functions: 1,
+            lines: 1,
+            statements: 1,
+        },
+    },
+}

package.json

@@ -57,7 +57,10 @@
         "build:browser": "tsdx build --entry ./src/index.browser.ts --tsconfig ./tsconfig.browser.json --format esm,cjs --name browser",
         "build:node": "tsdx build --entry ./src/index.node.ts --tsconfig ./tsconfig.node.json --format cjs --name node",
         "build": "node scripts/build.js",
-        "test": "tsdx test --passWithNoTests",
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "test:coverage": "jest --coverage",
+        "test:ci": "jest --coverage --ci --maxWorkers=2",
         "lint": "tsdx lint",
         "prepare": "tsdx build",
         "size": "size-limit",
@@ -99,6 +102,10 @@
         "@storybook/react": "^7.6.20",
         "@storybook/react-webpack5": "^7.6.20",
         "@storybook/testing-library": "^0.2.2",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jest": "29.5.11",
         "@types/node": "^20.10.0",
         "@types/pako": "^2.0.3",
         "@types/react": "^18.2.39",
@@ -110,6 +117,10 @@
         "babel-loader": "^9.1.3",
         "highlight.js": "10.7.3",
         "husky": "^8.0.3",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "29.7.0",
+        "jest-canvas-mock": "^2.5.2",
+        "jest-environment-jsdom": "29.7.0",
         "lowlight": "1.20.0",
         "postcss": "^8.4.31",
         "prettier": "3.0.3",
@@ -124,6 +135,7 @@
         "size-limit": "^10.0.3",
         "storybook": "^7.5.3",
         "tailwindcss": "^3.3.5",
+        "ts-jest": "29.1.1",
         "tsdx": "^0.14.1",
         "tslib": "^2.6.2",
         "typescript": "^5.3.2",