test: drop jest & migrate to vitest

tusen-ai · Nov 28, 2024 · 5260a16 · 5260a16
1 parent 9a2d034
commit 5260a16
Show file tree

Hide file tree

Showing 176 changed files with 558 additions and 948 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -44,13 +44,13 @@ jobs:
       matrix:
         node-version: [18, 20]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
         run: corepack enable
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -67,6 +67,6 @@ jobs:
         run: pnpm run test:cov
 
       - name: Code coverage
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -48,10 +48,10 @@
     "format": "pnpm run format:code && pnpm run format:md && pnpm run lint:fix",
     "format:code": "prettier --write \"(src|demo)/**/*.(vue|js)\"",
     "format:md": "prettier --write --parser markdown --prose-wrap never \"(src|demo)/**/*.md\"",
-    "test": "NODE_ENV=test jest --collectCoverage=false",
-    "test:update": "NODE_ENV=test jest -u --collectCoverage=false",
-    "test:cov": "NODE_ENV=test NODE_OPTIONS=--unhandled-rejections=warn jest",
-    "test:watch": "NODE_ENV=test jest ---watch --verbose --coverage",
+    "test": "NODE_ENV=test vitest",
+    "test:update": "NODE_ENV=test vitest -u",
+    "test:cov": "NODE_ENV=test NODE_OPTIONS=--unhandled-rejections=warn vitest --coverage",
+    "test:watch": "NODE_ENV=test vitest",
     "test:umd": "jest --collectCoverage=false --testMatch=\"<rootDir>/umd-test/index.spec.js\"",
     "test:esm": "jest --collectCoverage=false --testMatch=\"<rootDir>/esm-test/index.spec.js\"",
     "gen-version": "node scripts/gen-version",
@@ -100,16 +100,15 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.3",
     "@types/estree": "^1.0.1",
-    "@types/jest": "^29.5.4",
     "@vicons/fluent": "^0.12.0",
     "@vicons/ionicons4": "^0.12.0",
     "@vicons/ionicons5": "^0.12.0",
     "@vitejs/plugin-vue": "^5.0.3",
+    "@vitest/coverage-v8": "^2.1.6",
     "@vue/compiler-sfc": "^3.4.15",
     "@vue/server-renderer": "^3.5.13",
     "@vue/test-utils": "^2.4.1",
     "autoprefixer": "^10.4.15",
-    "babel-jest": "^29.6.4",
     "codesandbox": "^2.2.3",
     "cssnano": "^7.0.4",
     "deepmerge": "^4.3.1",
@@ -121,9 +120,6 @@
     "grapheme-splitter": "^1.0.4",
     "husky": "^9.0.6",
     "inquirer": "^10.0.3",
-    "jest": "^29.6.4",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.6.4",
     "katex": "^0.16.8",
     "lint-staged": "^15.1.0",
     "marked": "^12.0.2",
@@ -132,10 +128,10 @@
     "rollup": "^4.3.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "superagent": "^10.0.0",
-    "ts-jest": "^29.1.1",
     "typescript": "5.5.4",
     "vfonts": "^0.0.3",
     "vite": "^5.0.4",
+    "vitest": "^2.1.6",
     "vue": "~3.5.13",
     "vue-router": "^4.2.4",
     "vue-tsc": "^2.0.6"

diff --git a/src/_internal/scrollbar/tests/server.spec.tsx b/src/_internal/scrollbar/tests/server.spec.tsx
@@ -1,8 +1,5 @@
 import { setup } from '@css-render/vue3-ssr'
 import { renderToString } from '@vue/server-renderer'
-/**
- * @jest-environment node
- */
 import { createSSRApp, h } from 'vue'
 import { NScrollbar } from '../index'
 

diff --git a/src/affix/tests/server.spec.tsx b/src/affix/tests/server.spec.tsx
@@ -1,8 +1,5 @@
 import { setup } from '@css-render/vue3-ssr'
 import { renderToString } from '@vue/server-renderer'
-/**
- * @jest-environment node
- */
 import { createSSRApp, h } from 'vue'
 import { NAffix } from '../..'
 

diff --git a/src/alert/tests/Alert.spec.ts b/src/alert/tests/Alert.spec.ts
@@ -127,8 +127,8 @@ describe('n-alert', () => {
   })
 
   it('should trigger callback when closed', async () => {
-    const handleCloseClick = jest.fn()
-    const handleOnAfterLeave = jest.fn()
+    const handleCloseClick = vi.fn()
+    const handleOnAfterLeave = vi.fn()
     const wrapper = mount(NAlert, {
       props: {
         closable: true,
@@ -138,15 +138,12 @@ describe('n-alert', () => {
     })
     const closeBtn = wrapper.find('.n-base-close.n-alert__close')
     expect(closeBtn.exists()).toBe(true)
-
     await closeBtn.trigger('click')
     expect(wrapper.emitted()).toHaveProperty('click')
-
     expect(handleCloseClick).toHaveBeenCalled()
-
-    setTimeout(() => {
+    vi.waitFor(() => {
       expect(handleOnAfterLeave).toHaveBeenCalled()
-      wrapper.unmount()
-    }, 0)
+    })
+    wrapper.unmount()
   })
 })
diff --git a/src/alert/tests/__snapshots__/Alert.spec.ts.snap b/src/alert/tests/__snapshots__/Alert.spec.ts.snap
@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`n-alert should work with type prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 245, 254, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #2080f0; --n-border: 1px solid rgba(199, 223, 251, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`;
+exports[`n-alert > should work with type prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 245, 254, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #2080f0; --n-border: 1px solid rgba(199, 223, 251, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`;
 
-exports[`n-alert should work with type prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 247, 242, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #18a058; --n-border: 1px solid rgba(197, 231, 213, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`;
+exports[`n-alert > should work with type prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 247, 242, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #18a058; --n-border: 1px solid rgba(197, 231, 213, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`;
 
-exports[`n-alert should work with type prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(254, 247, 237, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #f0a020; --n-border: 1px solid rgba(250, 224, 181, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`;
+exports[`n-alert > should work with type prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(254, 247, 237, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #f0a020; --n-border: 1px solid rgba(250, 224, 181, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`;
 
-exports[`n-alert should work with type prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(251, 238, 241, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #d03050; --n-border: 1px solid rgba(243, 203, 211, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`;
+exports[`n-alert > should work with type prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(251, 238, 241, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #d03050; --n-border: 1px solid rgba(243, 203, 211, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`;
diff --git a/src/alert/tests/server.spec.tsx b/src/alert/tests/server.spec.tsx
@@ -1,8 +1,5 @@
 import { setup } from '@css-render/vue3-ssr'
 import { renderToString } from '@vue/server-renderer'
-/**
- * @jest-environment node
- */
 import { createSSRApp, h } from 'vue'
 import { NAlert } from '../..'
 

diff --git a/src/anchor/tests/server.spec.tsx b/src/anchor/tests/server.spec.tsx
@@ -1,8 +1,5 @@
 import { setup } from '@css-render/vue3-ssr'
 import { renderToString } from '@vue/server-renderer'
-/**
- * @jest-environment node
- */
 import { createSSRApp, h } from 'vue'
 import { NAnchor } from '../..'