test: rendering dapp kit in the sample react app

examples/sample-react-app/package.json

@@ -9,15 +9,19 @@
         "dev": "vite",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview",
-        "purge": "yarn clean; rm -rf node_modules"
+        "purge": "yarn clean; rm -rf node_modules",
+        "test": "vitest"
     },
     "dependencies": {
         "@vechain/dapp-kit": "*",
         "@vechain/dapp-kit-react": "*",
         "@vechain/dapp-kit-ui": "*",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "vite-plugin-node-polyfills": "^0.17.0"
+        "react-test-renderer": "^18.2.0",
+        "vite": "^5.0.8",
+        "vite-plugin-node-polyfills": "^0.17.0",
+        "vitest": "^1.2.2"
     },
     "devDependencies": {
         "@types/react": "^18.2.37",
@@ -28,7 +32,6 @@
         "eslint": "^8.53.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.4",
-        "typescript": "^5.2.2",
-        "vite": "^4.5.2"
+        "typescript": "^5.2.2"
     }
 }

examples/sample-react-app/test/setup/resizeObserverMock.ts

@@ -0,0 +1,22 @@
+class ResizeObserverMock {
+    private readonly callback: ResizeObserverCallback;
+
+    constructor(callback: ResizeObserverCallback) {
+        this.callback = callback;
+    }
+
+    observe() {
+        // Mock observe method
+    }
+
+    unobserve() {
+        // Mock unobserve method
+    }
+
+    disconnect() {
+        // Mock disconnect method
+    }
+}
+
+// Make the mock globally available
+global.ResizeObserver = ResizeObserverMock;

examples/sample-react-app/test/setup/setup.ts

@@ -0,0 +1,15 @@
+import { vi } from 'vitest';
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(), // deprecated
+        removeListener: vi.fn(), // deprecated
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});

examples/sample-react-app/test/test.example.test.tsx

@@ -0,0 +1,33 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+import { test, vi } from 'vitest';
+import App from '../src/App';
+import { DAppKitProvider } from '@vechain/dapp-kit-react';
+import { WalletConnectOptions } from '@vechain/dapp-kit';
+
+test('Welcome', async () => {
+    const walletConnectOptions: WalletConnectOptions = {
+        projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+        metadata: {
+            name: 'Sample VeChain dApp',
+            description: 'A sample VeChain dApp',
+            url: window.location.origin,
+            icons: [``],
+        },
+    };
+    const component = renderer.create(
+        <React.StrictMode>
+            <DAppKitProvider
+                nodeUrl={'https://testnet.vechain.org/'}
+                genesis={'test'}
+                usePersistence
+                walletConnectOptions={walletConnectOptions}
+            >
+                <App />
+            </DAppKitProvider>
+        </React.StrictMode>,
+    );
+
+    const tree = component.toJSON();
+    expect(tree).toBeDefined();
+});

examples/sample-react-app/vite.config.ts

@@ -1,6 +1,9 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import { resolve } from 'path';
 
 export default defineConfig({
     plugins: [nodePolyfills(), react()],
@@ -9,6 +12,15 @@ export default defineConfig({
             transformMixedEsModules: true,
         },
     },
+    //vitest
+    test: {
+        globals: true,
+        environment: 'jsdom',
+        setupFiles: [
+            resolve(__dirname, 'test/setup/setup.ts'),
+            resolve(__dirname, 'test/setup/resizeObserverMock.ts'),
+        ],
+    },
     base:
         process.env.NODE_ENV === 'production'
             ? '/vechain-dapp-kit/react/'