chore: use vitest UI in /utils (working)

package.json

@@ -64,15 +64,13 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.12",
     "@types/node": "^22.9.3",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "@vitest/coverage-v8": "^2.1.5",
     "@vitest/ui": "^2.1.5",
-    "babel-jest": "^29.7.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -83,21 +81,14 @@
     "father": "^4.3.8",
     "happy-dom": "^15.11.6",
     "husky": "^8.0.3",
-    "jest": "^29.7.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-junit": "^16.0.0",
-    "jest-transform-stub": "^2.0.0",
     "jsdom": "^23.0.1",
     "lint-staged": "^15.2.0",
     "node-fetch": "^3.3.2",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.5",
-    "ts-jest": "^29.2.5",
     "typescript": "^5.3.3",
     "vite-tsconfig-paths": "^5.1.3",
-    "vitest": "^2.1.5",
-    "vitest-canvas-mock": "^0.3.3"
+    "vitest": "^2.1.5"
   },
   "ci": {
     "type": "aci",

packages/tools/__mocks__/setupGlobal.ts

@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom';
-import 'vitest-canvas-mock';
 import { cleanup } from '@testing-library/react';
 import { afterEach, beforeAll, vi } from 'vitest';
 
@@ -37,6 +36,33 @@ if (typeof window !== 'undefined') {
     })),
   });
 }
+// https://github.com/wobsoriano/vitest-canvas-mock/issues/16
+if (typeof HTMLCanvasElement !== 'undefined') {
+  HTMLCanvasElement.prototype.getContext = vi.fn().mockReturnValue({
+    fillRect: vi.fn(),
+    clearRect: vi.fn(),
+    // Añade más métodos si los necesitas
+    getImageData: vi.fn().mockReturnValue({ data: [] }),
+    putImageData: vi.fn(),
+    createImageData: vi.fn().mockReturnValue([]),
+    setTransform: vi.fn(),
+    drawImage: vi.fn(),
+    save: vi.fn(),
+    fillText: vi.fn(),
+    restore: vi.fn(),
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    closePath: vi.fn(),
+    stroke: vi.fn(),
+    translate: vi.fn(),
+    scale: vi.fn(),
+    rotate: vi.fn(),
+    arc: vi.fn(),
+    fill: vi.fn(),
+    measureText: vi.fn().mockReturnValue({ width: 0 }),
+  });
+}
 
 import { TextEncoder, TextDecoder } from 'util';
 global.TextEncoder = TextEncoder;

packages/tools/vite.config.ts

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

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

@@ -1,5 +1,3 @@
-/** @jest-environment jsdom */
-
 import { renderHook, act } from '@testing-library/react';
 import { useCheckAllowanceAndApprove } from '../useCheckAllowanceAndApprove';
 import { useConnectWallet } from '@aelf-web-login/wallet-adapter-react';

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

@@ -1,4 +1,3 @@
-/** @jest-environment jsdom */
 import { renderHook, act } from '@testing-library/react';
 import { useGetBalance } from '../useGetBalance';
 

packages/utils/src/is/__tests__/isAElfBridge.test.ts

@@ -2,7 +2,7 @@ import { isAElfBridge } from '../isAElfBridge';
 import { AElfDappBridge } from '@aelf-react/types';
 
 describe('test isAElfBridge', () => {
-  test('return true when contain options and connect', () => {
+  it('return true when contain options and connect', () => {
     const aelfBridge = {
       options: {
         rpcUrl: 'test',
@@ -13,7 +13,7 @@ describe('test isAElfBridge', () => {
     expect(isAElfBridge(aelfBridge as unknown as AElfDappBridge)).toBeTruthy();
   });
 
-  test('return false when miss options and connect', () => {
+  it('return false when miss options and connect', () => {
     const aelfBridge = {
       connect: vi.fn(),
     };

packages/utils/src/is/__tests__/isMobileDevices.test.ts

@@ -1,25 +1,33 @@
 import { isMobileDevices } from '../isMobileDevices';
+import type DetachedWindowAPI from 'happy-dom/lib/window/DetachedWindowAPI.js';
 
-describe('isMobileDevices', () => {
-  const originalNavigator = global.navigator;
+declare global {
+  const happyDOM: DetachedWindowAPI;
+}
+const originalNavigator = happyDOM.settings.navigator;
+
+beforeEach(() => {
+  // global.navigator = {
+  //   userAgent:
+  //     'Mozilla/5.0 (iPhone; CPU iPhone OS 13_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148',
+  // } as Navigator;
+});
+
+afterEach(() => {
+  happyDOM.settings.navigator = originalNavigator;
+});
 
-  beforeEach(() => {
-    global.navigator = {
+describe('isMobileDevices', () => {
+  it('returns true for mobile user agent', () => {
+    happyDOM.settings.navigator = {
       userAgent:
         'Mozilla/5.0 (iPhone; CPU iPhone OS 13_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148',
     } as Navigator;
-  });
-
-  afterEach(() => {
-    global.navigator = originalNavigator;
-  });
-
-  test('returns true for mobile user agent', () => {
     expect(isMobileDevices()).toBe(true);
   });
 
-  test('returns false for desktop user agent', () => {
-    global.navigator = {
+  it('returns false for desktop user agent', () => {
+    happyDOM.settings.navigator = {
       userAgent:
         'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
     } as Navigator;

packages/utils/src/is/isMobileDevices.ts

@@ -187,5 +187,6 @@ export function isMobile(param?: IsMobileParameter): isMobileResult {
 
 export function isMobileDevices() {
   const isM = isMobile();
+  console.log('---', navigator.userAgent, '---', isM, '---', happyDOM.settings.navigator);
   return isM.apple.device || isM.android.device;
 }

packages/utils/src/utility/__tests__/Loading.test.tsx

@@ -1,6 +1,4 @@
-/** @jest-environment jsdom */
 import { screen, waitFor, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import { Loading } from '../Loading';
 
 describe('Loading class', () => {