test: Update vitest and add timeout workflow (#8975)

.eslintrc

@@ -1,8 +1,7 @@
 {
   "env": {
     "es6": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "plugins": ["lodash", "address"],
   "extends": ["@pancakeswap/eslint-config-pancake", "plugin:react/jsx-runtime"],

.github/workflows/format.yml

@@ -6,6 +6,7 @@ on:
 jobs:
   code:
     runs-on: ubuntu-latest
+    timeout-minutes: 4
 
     steps:
       - name: Checkout code

.github/workflows/lint.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   eslint:
     runs-on: ubuntu-latest
+    timeout-minutes: 4
 
     steps:
       - name: Checkout code

.github/workflows/testConfig.yml

@@ -3,17 +3,18 @@ name: Test Config
 on:
   pull_request:
     paths:
-      - "apps/web/src/config/**"
-      - "packages/pools/src/**"
-      - "packages/farms/constants/**"
-      - "packages/tokens/src/**"
+      - 'apps/web/src/config/**'
+      - 'packages/pools/src/**'
+      - 'packages/farms/constants/**'
+      - 'packages/tokens/src/**'
   push:
     branches:
       - develop
 
 jobs:
   test:
     runs-on: ubuntu-latest
+    timeout-minutes: 4
 
     strategy:
       fail-fast: true
@@ -33,7 +34,7 @@ jobs:
       - name: Set up node@18
         uses: actions/setup-node@v3
         with:
-          cache: "pnpm"
+          cache: 'pnpm'
           node-version: 18.18.2
 
       - name: Get pnpm store directory

.github/workflows/tsCheck.yml

@@ -6,6 +6,7 @@ on:
 jobs:
   ts-check:
     name: Typescript Error Check
+    timeout-minutes: 8
     runs-on: ubuntu-latest
     permissions: write-all
     if: github.event.pull_request.head.repo.full_name == github.repository
@@ -19,7 +20,7 @@ jobs:
       - name: Set up node@18
         uses: actions/setup-node@v3
         with:
-          cache: "pnpm"
+          cache: 'pnpm'
           node-version: 18.18.2
 
       - name: Get pnpm store directory
@@ -66,7 +67,7 @@ jobs:
         uses: chefjackson/[email protected]
         if: steps.files.outputs.changed == 'true'
         env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
+          NODE_OPTIONS: '--max_old_space_size=4096'
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           use-check: true

.github/workflows/unitTests.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   unit-tests:
     runs-on: ubuntu-latest
+    timeout-minutes: 4
 
     strategy:
       fail-fast: true
@@ -28,7 +29,7 @@ jobs:
       - name: Set up node@18
         uses: actions/setup-node@v3
         with:
-          cache: "pnpm"
+          cache: 'pnpm'
           node-version: 18.18.2
 
       - name: Get pnpm store directory

apps/aptos/.eslintrc

@@ -1,8 +1,7 @@
 {
   "env": {
     "es6": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "plugins": ["lodash"],
   "extends": ["plugin:@next/next/recommended"],

apps/aptos/package.json

@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@vanilla-extract/vite-plugin": "^3.8.0",
-    "@vitejs/plugin-react": "4.0.0",
+    "@vitejs/plugin-react": "4.2.1",
     "vite-tsconfig-paths": "^4.0.3",
     "@types/lodash": "^4.14.168",
     "@next/bundle-analyzer": "13.0.7",
@@ -59,6 +59,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.0.6",
     "eslint": "^8.32.0",
+    "happy-dom": "^13.3.8",
     "@pancakeswap/tsconfig": "workspace:*",
     "@pancakeswap/next-config": "workspace:*"
   }

apps/aptos/vitest.config.ts

@@ -1,13 +1,13 @@
-import { defineConfig } from 'vitest/config'
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   // @ts-ignore
   plugins: [tsconfigPaths(), react(), vanillaExtractPlugin()],
   test: {
-    environment: 'jsdom',
+    environment: 'happy-dom',
     globals: true,
   },
 })

apps/blog/.eslintrc

@@ -1,8 +1,7 @@
 {
   "env": {
     "es6": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "plugins": ["lodash"],
   "extends": ["plugin:@next/next/recommended"],

apps/bridge/.eslintrc

@@ -1,8 +1,7 @@
 {
   "env": {
     "es6": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "plugins": ["lodash"],
   "extends": ["plugin:@next/next/recommended"],

apps/web/.eslintrc

@@ -1,8 +1,7 @@
 {
   "env": {
     "es6": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "extends": ["plugin:@next/next/recommended"],
   "rules": {

apps/web/package.json

@@ -128,7 +128,6 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "@angleprotocol/sdk": "^3.0.121",
     "@next/eslint-plugin-next": "13.4.2",
     "@pancakeswap/next-config": "workspace:*",
     "@pancakeswap/tsconfig": "workspace:*",
@@ -138,7 +137,6 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/canvas-confetti": "^1.4.2",
     "@types/d3": "^7.4.0",
-    "@types/jest": "^26.0.23",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash": "^4.14.178",
     "@types/node": "^13.13.5",
@@ -152,12 +150,13 @@
     "@types/simplemde": "^1.11.7",
     "@types/styled-system": "^5.1.17",
     "@types/uuid": "^8.0.0",
-    "@vanilla-extract/vite-plugin": "^3.8.0",
-    "@vitejs/plugin-react": "4.0.0",
+    "@vanilla-extract/vite-plugin": "^4.0.2",
+    "@vitejs/plugin-react": "4.2.1",
     "@walletconnect/notify-client": "0.14.6",
     "eslint": "^8.32.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-lodash": "^7.4.0",
+    "happy-dom": "^13.3.8",
     "lint-staged": "^12.3.4",
     "postcss-scss": "^4.0.3",
     "postcss-syntax": "^0.36.2",
@@ -171,7 +170,6 @@
     "stylelint-config-standard": "^25.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "tilg": "^0.1.1",
-    "typechain": "^6.1.0",
     "vite-tsconfig-paths": "^4.0.3"
   }
 }

apps/web/src/hooks/useRefreshEffect.test.ts

@@ -1,10 +1,10 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { waitFor } from '@testing-library/react'
 import { act, renderHook } from '@testing-library/react-hooks'
 import { FAST_INTERVAL, SLOW_INTERVAL } from 'config/constants'
 import { useState } from 'react'
-import { waitFor } from '@testing-library/react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { createWagmiWrapper } from 'testUtils'
-import { vi, describe, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import { useFastRefreshEffect, useSlowRefreshEffect } from './useRefreshEffect'
 
 describe('useRefreshEffect', () => {

apps/web/src/hooks/useVaultApy.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks'
 import BigNumber from 'bignumber.js'
 import { createSWRWrapper } from 'testUtils'
-import { vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import * as PoolHooks from '../state/pools/hooks'
 import { useVaultApy } from './useVaultApy'
 

apps/web/src/state/transactions/updater.test.ts

@@ -1,5 +1,6 @@
-import { shouldCheck } from './updater'
+import { describe, expect, it } from 'vitest'
 import { TransactionDetails } from './reducer'
+import { shouldCheck } from './updater'
 
 describe('transactions updater', () => {
   const trxDetailInFetchedTransactions: TransactionDetails = {

apps/web/src/testUtils.tsx

@@ -2,19 +2,19 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable import/no-unresolved */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render as rtlRender } from '@testing-library/react'
+import Provider from 'Providers'
+import { Provider as JotaiProvider } from 'jotai'
+import { useHydrateAtoms } from 'jotai/utils'
 import noop from 'lodash/noop'
 import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import { NextRouter } from 'next/router'
-import Provider from 'Providers'
-import { Provider as JotaiProvider } from 'jotai'
 import { initializeStore, makeStore } from 'state'
 import { SWRConfig } from 'swr'
+import { wagmiConfig } from 'utils/wagmi'
 import { vi } from 'vitest'
 import { WagmiConfig } from 'wagmi'
-import { useHydrateAtoms } from 'jotai/utils'
-import { wagmiConfig } from 'utils/wagmi'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const mockRouter: NextRouter = {
   basePath: '',
@@ -83,7 +83,7 @@ export const createReduxWrapper =
     )
 
 export const createSWRWrapper =
-  (fallbackData = undefined) =>
+  (fallbackData: any = undefined) =>
   ({ children }) =>
     (
       <WagmiConfig config={wagmiConfig}>

apps/web/src/utils/wagmi.ts

@@ -1,9 +1,9 @@
+import { getWagmiConnector } from '@binance/w3w-wagmi-connector'
+import { CyberWalletConnector, isCyberWallet } from '@cyberlab/cyber-app-sdk'
 import { ChainId } from '@pancakeswap/chains'
 import { BinanceWalletConnector } from '@pancakeswap/wagmi/connectors/binanceWallet'
 import { BloctoConnector } from '@pancakeswap/wagmi/connectors/blocto'
 import { TrustWalletConnector } from '@pancakeswap/wagmi/connectors/trustWallet'
-import { CyberWalletConnector, isCyberWallet } from '@cyberlab/cyber-app-sdk'
-import { getWagmiConnector } from '@binance/w3w-wagmi-connector'
 import memoize from 'lodash/memoize'
 import { createConfig, createStorage } from 'wagmi'
 import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
@@ -33,7 +33,9 @@ export const coinbaseConnector = new CoinbaseWalletConnector({
 export const walletConnectConnector = new WalletConnectConnector({
   chains,
   options: {
-    showQrModal: true,
+    // ignore the error in test environment
+    // Error: To use QR modal, please install @walletconnect/modal package
+    showQrModal: process.env.NODE_ENV !== 'test',
     projectId: 'e542ff314e26ff34de2d4fba98db70bb',
   },
 })

apps/web/vitest.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vitest/config'
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import react from '@vitejs/plugin-react'
-import tsconfigPaths from 'vite-tsconfig-paths'
 import { resolve } from 'path'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
 
 const r = (p: string) => resolve(__dirname, p)
 
@@ -21,9 +21,8 @@ export default defineConfig({
   },
   test: {
     setupFiles: ['./vitest.setup.js'],
-    environment: 'jsdom',
+    environment: 'happy-dom',
     globals: true,
-    dangerouslyIgnoreUnhandledErrors: true, // wallet connect v2
     exclude: ['src/config/__tests__', 'node_modules'],
   },
 })

apps/web/vitest.setup.js

@@ -2,8 +2,8 @@
 
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
-import { vi } from 'vitest'
 import '@testing-library/jest-dom/extend-expect'
+import { vi } from 'vitest'
 
 global.setImmediate = vi.useRealTimers
 

package.json

@@ -54,7 +54,6 @@
     "eslint-plugin-address": "^0.0.2",
     "eslint-plugin-lodash": "^7.4.0",
     "husky": "^7.0.0",
-    "jest": "^27.4.5",
     "lint-staged": "^12.3.4",
     "prettier": "^2.8.3",
     "serve": "^12.0.0",
@@ -68,7 +67,7 @@
     "tsx": "^3.12.6",
     "turbo": "1.10.2",
     "typescript": "5.2.2",
-    "vitest": "^0.30.1",
+    "vitest": "^1.2.2",
     "wrangler": "2.20.2"
   },
   "volta": {

packages/aptos-swap-sdk/package.json

@@ -38,10 +38,7 @@
     "aptos": "1.x"
   },
   "devDependencies": {
-    "@swc/core": "^1.2.215",
-    "@swc/jest": "^0.2.21",
     "@types/big.js": "^4.0.5",
-    "@types/jest": "^24.0.25",
     "tsup": "^6.7.0"
   },
   "engines": {