test: add Jest + RTL and Playwright E2E with example tests (fixes #24)

app/web-app/__mocks__/@reown-appkit-react.js

@@ -0,0 +1,3 @@
+module.exports = {
+  useAppKit: () => ({ open: () => {} }),
+};

app/web-app/__mocks__/lucide-react.js

@@ -0,0 +1,9 @@
+const React = require('react');
+
+// Return a simple SVG React component for any named export
+module.exports = new Proxy({}, {
+  get: (_target, prop) => {
+    if (prop === '__esModule') return true;
+    return (props) => React.createElement('svg', { ...props, 'data-icon': String(prop) });
+  },
+});

app/web-app/e2e/home.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test';
+
+test('homepage shows brand', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  await expect(page.locator('text=FairFund')).toBeVisible();
+});

app/web-app/jest.config.cjs

@@ -0,0 +1,18 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({ dir: './' });
+
+const customJestConfig = {
+  roots: ['<rootDir>/src'],
+  setupFiles: ['<rootDir>/jest.mocks.js'],
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '^lucide-react(.*)$': '<rootDir>/__mocks__/lucide-react.js',
+    '^@reown/appkit/react$': '<rootDir>/__mocks__/@reown-appkit-react.js',
+  },
+};
+
+module.exports = createJestConfig(customJestConfig);
+

app/web-app/jest.mocks.js

@@ -0,0 +1,24 @@
+// Mocks to run before modules are imported
+
+// Mock wagmi hooks used in components
+jest.mock('wagmi', () => ({
+  useAccount: () => ({ isConnected: false }),
+  useWalletClient: () => ({ data: null }),
+  useChainId: () => undefined,
+}));
+
+// Mock @reown/appkit react hook used for wallet modal
+jest.mock('@reown/appkit/react', () => ({
+  useAppKit: () => ({ open: jest.fn() }),
+}));
+
+// Mock lucide-react icons (ESM) to prevent ESM parsing issues in Jest
+jest.mock('lucide-react', () => {
+  const React = require('react');
+  return new Proxy({}, {
+    get: (_target, prop) => {
+      if (prop === '__esModule') return true;
+      return (props) => React.createElement('svg', { ...props, 'data-icon': String(prop) });
+    },
+  });
+});

app/web-app/jest.setup.js

@@ -0,0 +1,25 @@
+// Setup file executed before tests to mock environment and modules
+require('@testing-library/jest-dom');
+
+// Mock wagmi hooks used in components
+jest.mock('wagmi', () => ({
+  useAccount: () => ({ isConnected: false }),
+  useWalletClient: () => ({ data: null }),
+  useChainId: () => undefined,
+}));
+
+// Mock @reown/appkit react hook used for wallet modal
+jest.mock('@reown/appkit/react', () => ({
+  useAppKit: () => ({ open: jest.fn() }),
+}));
+
+// Mock lucide-react icons (ESM) to prevent ESM parsing issues in Jest
+jest.mock('lucide-react', () => {
+  const React = require('react');
+  return new Proxy({}, {
+    get: (_target, prop) => {
+      if (prop === '__esModule') return true;
+      return (props) => React.createElement('svg', { ...props, 'data-icon': String(prop) });
+    },
+  });
+});

app/web-app/jest.setup.ts

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

app/web-app/package.json

@@ -8,6 +8,11 @@
         "start": "next start",
         "lint": "next lint",
         "format": "prettier --write .",
+        "test": "jest --passWithNoTests",
+        "test:watch": "jest --watch",
+        "test:coverage": "jest --coverage",
+        "e2e": "playwright test",
+        "e2e:headed": "playwright test --headed",
         "addMockSpaces": "ts-node --compiler-options '{\"module\":\"CommonJS\"}' src/mocks/add-spaces.ts",
         "cleanDB": "ts-node --compiler-options '{\"module\":\"CommonJS\"}' src/mocks/remove.ts"
     },
@@ -52,6 +57,15 @@
         "zod": "^3.23.8"
     },
     "devDependencies": {
+        "@testing-library/jest-dom": "^6.0.1",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
+        "@types/jest": "^29.5.3",
+        "jest-environment-jsdom": "^28.0.0",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^29.7.0",
+        "ts-jest": "^29.1.0",
+        "@playwright/test": "^1.43.0",
         "@faker-js/faker": "^8.4.1",
         "@types/node": "^20",
         "@types/react": "^18",

app/web-app/playwright.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    actionTimeout: 0,
+    navigationTimeout: 30000,
+  },
+  webServer: {
+    command: 'npm run dev',
+    port: 3000,
+    reuseExistingServer: true,
+  }
+});

app/web-app/src/components/__tests__/navbar.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+// Mocks for next/navigation and next-auth
+jest.mock('next/navigation', () => ({ usePathname: () => '/' }));
+jest.mock('next-auth/react', () => ({ useSession: () => ({ data: null }) }));
+
+import Navbar from '../navbar';
+
+describe('Navbar', () => {
+  it('renders the brand', () => {
+    render(<Navbar />);
+    expect(screen.getByText(/FairFund/i)).toBeInTheDocument();
+  });
+});