tests: add unit tests for react components

.github/workflows/ci-nym-vpn-app-js.yml

@@ -45,9 +45,9 @@ jobs:
         working-directory: nym-vpn-app
         run: npm run fmt:check
 
-      #      - name: Run tests
-      #        working-directory: nym-vpn-app
-      #        run: npm run test
+      - name: Run tests
+        working-directory: nym-vpn-app
+        run: npm run test -- --silent
 
       - name: Check build
         working-directory: nym-vpn-app

nym-vpn-app/.gitignore

@@ -26,3 +26,5 @@ dist-ssr
 yarn.lock
 
 public/licenses-*.json
+
+coverage

nym-vpn-app/eslint.config.js

@@ -9,9 +9,17 @@ import importPlugin from 'eslint-plugin-import';
 
 export default [
   globalIgnores(['src/types/tauri.ts']),
+  {
+    ignores: [
+      '*.config.js',
+      '*.config.ts',
+      '**/*.test.{ts,tsx}',
+      '**/__tests__/**/*',
+      '**/src/test/**/*',
+    ],
+  },
   {
     files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
-    ignores: ['*.config.js', '*.config.ts'],
   },
   eslint.configs.recommended,
   ...tseslint.configs.recommendedTypeChecked,

nym-vpn-app/jest.config.js

@@ -0,0 +1,39 @@
+/** @type {import('jest').Config} */
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/test/setup.tsx'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(svg|png|jpg|jpeg|gif)$': '<rootDir>/src/test/__mocks__/fileMock.js',
+    '\\.svg\\?react$': '<rootDir>/src/test/__mocks__/svgMock.js',
+  },
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        useESM: true,
+        tsconfig: 'tsconfig.test.json',
+      },
+    ],
+  },
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.(ts|tsx|js)',
+    '<rootDir>/src/**/*.(test|spec).(ts|tsx|js)',
+  ],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/main.tsx',
+    '!src/dev.ts',
+    '!src/**/*.stories.*',
+    '!src/test/**/*',
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+  clearMocks: true,
+  resetMocks: true,
+  restoreMocks: true,
+};