chore: use vitest UI in /utils (WIP)

package.json

@@ -96,7 +96,8 @@
     "ts-jest": "^29.2.5",
     "typescript": "^5.3.3",
     "vite-tsconfig-paths": "^5.1.3",
-    "vitest": "^2.1.5"
+    "vitest": "^2.1.5",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "ci": {
     "type": "aci",

packages/bridge/package.json

@@ -41,7 +41,6 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "babel-jest": "^29.7.0",
     "@portkey/did-ui-react": "^2.15.9",
     "@portkey/types": "^2.15.9",
     "@portkey/utils": "^2.15.9",

packages/react/package.json

@@ -40,7 +40,6 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@types/jest": "^29.5.13",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "father": "^4.3.8"

packages/tools/__mocks__/setupGlobal.ts

@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom';
+import 'vitest-canvas-mock';
 import { cleanup } from '@testing-library/react';
 import { afterEach, beforeAll, vi } from 'vitest';
 

packages/tools/vite.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
       optimizer: {
         web: {
           enabled: true,
+          include: ['vitest-canvas-mock'],
         },
       },
     },

packages/utils/package.json

@@ -23,9 +23,10 @@
   "scripts": {
     "dev": "father dev",
     "build": "father build",
-    "test": "jest --config=jest.config.ts  --detectOpenHandles",
-    "test:watch": "jest --config=jest.config.ts --watch --detectOpenHandles",
-    "test:coverage": "jest --config=jest.config.ts --coverage --detectOpenHandles"
+    "test": "vitest",
+    "test:dev": "pnpm test -- --watch",
+    "test:coverage": "pnpm test -- --coverage",
+    "test:ui": "pnpm test:dev --ui"
   },
   "dependencies": {
     "@aelf-web-login/wallet-adapter-base": "0.1.2",

packages/utils/src/address/__tests__/decodeAddress.test.ts

@@ -1,18 +1,21 @@
+import { type Mock } from 'vitest';
 import { decodeAddress } from '../decodeAddress';
 import AElf from 'aelf-sdk';
 
 // Mock AElf.utils.decodeAddressRep to avoid actual decoding during tests
-jest.mock('aelf-sdk', () => {
+vi.mock('aelf-sdk', () => {
   return {
-    utils: {
-      decodeAddressRep: jest.fn(),
+    default: {
+      utils: {
+        decodeAddressRep: vi.fn(),
+      },
     },
   };
 });
 
 describe('decodeAddress', () => {
   beforeEach(() => {
-    (AElf.utils.decodeAddressRep as jest.Mock).mockClear();
+    (AElf.utils.decodeAddressRep as Mock).mockClear();
   });
 
   it('should return false when address is empty', () => {
@@ -38,7 +41,7 @@ describe('decodeAddress', () => {
   });
 
   it('should return false when AElf.utils.decodeAddressRep throws an error', () => {
-    (AElf.utils.decodeAddressRep as jest.Mock).mockImplementation(() => {
+    (AElf.utils.decodeAddressRep as Mock).mockImplementation(() => {
       throw new Error('Decoding failed');
     });
     expect(decodeAddress('validAddress')).toBe(false);

packages/utils/src/contract/__tests__/getRawTransaction.test.ts

@@ -3,23 +3,24 @@ import getRawTransactionDiscover from '../getRawTransactionDiscover';
 import getRawTransactionPortkey from '../getRawTransactionPortkey';
 import { getRawTransaction } from '../getRawTransaction';
 import { WalletTypeEnum, TWalletInfo } from '@aelf-web-login/wallet-adapter-base';
+import { type Mock } from 'vitest';
 
-jest.mock('../getRawTransactionNight', () => ({
+vi.mock('../getRawTransactionNight', () => ({
   __esModule: true,
-  default: jest.fn().mockResolvedValue('encodedDataMock1'),
+  default: vi.fn().mockResolvedValue('encodedDataMock1'),
 }));
-jest.mock('../getRawTransactionDiscover', () => ({
+vi.mock('../getRawTransactionDiscover', () => ({
   __esModule: true,
-  default: jest.fn().mockResolvedValue('encodedDataMock2'),
+  default: vi.fn().mockResolvedValue('encodedDataMock2'),
 }));
-jest.mock('../getRawTransactionPortkey', () => ({
+vi.mock('../getRawTransactionPortkey', () => ({
   __esModule: true,
-  default: jest.fn().mockResolvedValue('encodedDataMock3'),
+  default: vi.fn().mockResolvedValue('encodedDataMock3'),
 }));
 
 describe('getRawTransaction', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should call getRawTransactionPortkey for WalletTypeEnum.aa and return its result', async () => {
@@ -100,9 +101,9 @@ describe('getRawTransaction', () => {
   it('should log and return null when an error occurs', async () => {
     const walletInfo: TWalletInfo = { address: 'mockAddress' };
 
-    const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
+    const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation();
 
-    (getRawTransactionDiscover as jest.Mock).mockImplementation(() => {
+    (getRawTransactionDiscover as Mock).mockImplementation(() => {
       throw new Error('Decoding failed');
     });
 

packages/utils/src/contract/__tests__/getRawTransactionNight.test.ts

@@ -1,20 +1,21 @@
 import { getContractBasic } from '@portkey/contracts';
 import getRawTransactionNight, { CreateTransactionParamsOfNight } from '../getRawTransactionNight';
+import { type Mock } from 'vitest';
 
-jest.mock('@portkey/contracts', () => ({
-  getContractBasic: jest.fn(),
+vi.mock('@portkey/contracts', () => ({
+  getContractBasic: vi.fn(),
 }));
 
 describe('getRawTransactionNight', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should return encoded transaction data', async () => {
     const mockContract = {
-      encodedTx: jest.fn().mockResolvedValue({ data: 'encodedDataMock' }),
+      encodedTx: vi.fn().mockResolvedValue({ data: 'encodedDataMock' }),
     };
-    (getContractBasic as jest.Mock).mockResolvedValue(mockContract);
+    (getContractBasic as Mock).mockResolvedValue(mockContract);
 
     const params: CreateTransactionParamsOfNight = {
       contractAddress: '0xExampleAddress',
@@ -39,7 +40,7 @@ describe('getRawTransactionNight', () => {
   });
 
   it('should handle errors from getContractBasic', async () => {
-    (getContractBasic as jest.Mock).mockRejectedValue(new Error('Failed to get contract'));
+    (getContractBasic as Mock).mockRejectedValue(new Error('Failed to get contract'));
 
     try {
       await getRawTransactionNight({

packages/utils/src/contract/__tests__/getRawTransactionPortkey.test.ts

@@ -3,29 +3,30 @@ import getRawTransactionPortkey, {
 } from '../getRawTransactionPortkey';
 import { getContractBasic } from '@portkey/contracts';
 import { aelf } from '@portkey/utils';
+import { type Mock } from 'vitest';
 
-jest.mock('@portkey/contracts', () => ({
-  getContractBasic: jest.fn(),
+vi.mock('@portkey/contracts', () => ({
+  getContractBasic: vi.fn(),
 }));
 
-jest.mock('@portkey/utils', () => ({
+vi.mock('@portkey/utils', () => ({
   aelf: {
-    getWallet: jest.fn(),
+    getWallet: vi.fn(),
   },
 }));
 
 describe('getRawTransactionPortkey', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should return encoded transaction data', async () => {
     const mockContract = {
-      encodedTx: jest.fn().mockResolvedValue({ data: 'encodedDataMock' }),
+      encodedTx: vi.fn().mockResolvedValue({ data: 'encodedDataMock' }),
     };
-    (getContractBasic as jest.Mock).mockResolvedValue(mockContract);
+    (getContractBasic as Mock).mockResolvedValue(mockContract);
 
-    (aelf.getWallet as jest.Mock).mockReturnValue({
+    (aelf.getWallet as Mock).mockReturnValue({
       address: 'testAddress',
     });
 
@@ -57,7 +58,7 @@ describe('getRawTransactionPortkey', () => {
   });
 
   it('should reject with error when getContractBasic fails', async () => {
-    (getContractBasic as jest.Mock).mockRejectedValue(new Error('Failed to get contract'));
+    (getContractBasic as Mock).mockRejectedValue(new Error('Failed to get contract'));
 
     const params: IRowTransactionPortkeyParams = {
       caHash: '0xExampleCaHash',

packages/utils/src/contract/__tests__/getTxResultRetry.test.ts

@@ -1,24 +1,25 @@
+import { type Mock } from 'vitest';
 import { getAElf, getTxResultRetry } from '../getTxResultRetry';
 import { getTxResult } from '@portkey/contracts';
 
-jest.mock('@portkey/contracts', () => ({
-  getTxResult: jest.fn(),
+vi.mock('@portkey/contracts', () => ({
+  getTxResult: vi.fn(),
 }));
 
 describe('test getAElf', () => {
   beforeEach(() => {
-    const mockConstructor = jest.fn((param1) => {
+    const mockConstructor = vi.fn((param1) => {
       return {
         param1,
       };
     });
 
-    const mockProviders = jest.fn().mockImplementation(() => {
+    const mockProviders = vi.fn().mockImplementation(() => {
       return {
-        HttpProvider: jest.fn().mockReturnValueOnce({}),
+        HttpProvider: vi.fn().mockReturnValueOnce({}),
       };
     });
-    jest.doMock('aelf-sdk', () => ({
+    vi.doMock('aelf-sdk', () => ({
       __esModule: true,
       default: mockConstructor,
       providers: mockProviders,
@@ -48,15 +49,15 @@ describe('test getAElf', () => {
 
 describe('test getTxResultRetry', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('returns mined transaction result', async () => {
     const mockTxResult = {
       Status: 'MINED',
     };
 
-    (getTxResult as jest.Mock).mockResolvedValue(mockTxResult);
+    (getTxResult as Mock).mockResolvedValue(mockTxResult);
 
     const TransactionId = 'some-transaction-id';
     const rpcUrl = 'https://example-rpc.com';
@@ -70,7 +71,7 @@ describe('test getTxResultRetry', () => {
     const mockTxResult = {
       Status: 'FAILED',
     };
-    (getTxResult as jest.Mock).mockResolvedValue(mockTxResult);
+    (getTxResult as Mock).mockResolvedValue(mockTxResult);
 
     const TransactionId = 'another-transaction-id';
     const rpcUrl = 'https://example-rpc.com';