Skip to content

Commit

Permalink
test: rendering dapp kit in the sample react app
Browse files Browse the repository at this point in the history
  • Loading branch information
Valazan committed Feb 5, 2024
1 parent b1e6e90 commit 35c475f
Show file tree
Hide file tree
Showing 6 changed files with 517 additions and 17 deletions.
11 changes: 7 additions & 4 deletions examples/sample-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
22 changes: 22 additions & 0 deletions examples/sample-react-app/test/setup/resizeObserverMock.ts
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 15 additions & 0 deletions examples/sample-react-app/test/setup/setup.ts
Original file line number Diff line number Diff line change
@@ -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(),
})),
});
33 changes: 33 additions & 0 deletions examples/sample-react-app/test/test.example.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import renderer from 'react-test-renderer';
import React from 'react';
import { test, vi } from 'vitest';

Check failure on line 3 in examples/sample-react-app/test/test.example.test.tsx

View workflow job for this annotation

GitHub Actions / Lint, Build & Test

'vi' is defined but never used

Check failure on line 3 in examples/sample-react-app/test/test.example.test.tsx

View workflow job for this annotation

GitHub Actions / Lint, Build & Test

'vi' is defined but never used
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();
});
12 changes: 12 additions & 0 deletions examples/sample-react-app/vite.config.ts
Original file line number Diff line number Diff line change
@@ -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()],
Expand All @@ -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/'
Expand Down
Loading

0 comments on commit 35c475f

Please sign in to comment.