chore: replace jest with vitest

.github/workflows/ci.yml

@@ -59,19 +59,19 @@ jobs:
         env:
           SCOPES: ${{ matrix.scopes }}
 
-  test-jest:
-    name: Test (Jest)
+  test-unit:
+    name: Test (Unit)
     needs: pre_job
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/pnpm-install
-      - run: pnpm run test:coverage -i
+      - run: pnpm run test
         working-directory: ./packages/vuetify
 
-  test-cypress:
-    name: Test (Cypress)
+  test-e2e:
+    name: Test (e2e)
     needs: pre_job
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-latest
@@ -94,7 +94,7 @@ jobs:
           if-no-files-found: ignore
 
   deploy:
-    needs: [lint, test-jest, test-cypress, build-vuetify]
+    needs: [lint, test-unit, test-e2e, build-vuetify]
     runs-on: ubuntu-latest
     if: github.event_name == 'push' && startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs'
     steps:
@@ -152,7 +152,7 @@ jobs:
           path: packages/docs/dist
 
   publish-docs:
-    needs: [lint, test-jest, build-docs]
+    needs: [lint, test-unit, build-docs]
     runs-on: ubuntu-latest
     if: github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/next')
     steps:

eslint-local-rules.js

@@ -5,7 +5,7 @@ module.exports = {
   'no-components-index': require('./scripts/rules/no-components-index'),
   'jsx-condition-key': require('./scripts/rules/jsx-condition-key'),
   'jsx-curly-spacing': require('./scripts/rules/jsx-curly-spacing'),
-  'jest-global-imports': require('./scripts/rules/jest-global-imports'),
+  'vitest-global-imports': require('./scripts/rules/vitest-global-imports'),
   'cypress-types-reference': require('./scripts/rules/cypress-types-reference'),
   'sort-imports': require('./scripts/rules/sort-imports'),
   'no-nullish-coalescing-in-condition': require('./scripts/rules/no-nullish-coalescing-in-condition'),

package.json

@@ -47,7 +47,6 @@
     "@vue/runtime-dom": "^3.4.27",
     "@vueuse/head": "^1.3.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^28.1.3",
     "conventional-changelog-cli": "^3.0.0",
     "conventional-changelog-vuetify": "^1.2.1",
     "conventional-github-releaser": "^3.1.5",
@@ -66,10 +65,6 @@
     "glob": "^11.0.0",
     "husky": "^3.1.0",
     "inquirer": "^6.5.2",
-    "jest": "^28.1.3",
-    "jest-cli": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-serializer-html": "^7.1.0",
     "lerna": "^8.1.7",
     "magic-string": "^0.30.9",
     "mkdirp": "^3.0.1",
@@ -94,6 +89,9 @@
   "pnpm": {
     "patchedDependencies": {
       "@mdi/[email protected]": "patches/@[email protected]"
+    },
+    "overrides": {
+      "tough-cookie": "5.0.0-rc.4"
     }
   }
 }

packages/vuetify/.eslintrc.js

@@ -51,7 +51,7 @@ module.exports = {
       plugins: ['jest'],
       extends: ['plugin:jest/recommended'],
       rules: {
-        'local-rules/jest-global-imports': 'error',
+        'local-rules/vitest-global-imports': 'error',
 
         'no-restricted-imports': 'off',
 

packages/vuetify/auto-imports.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const afterAll: typeof import('vitest')['afterAll']
+  const afterEach: typeof import('vitest')['afterEach']
+  const assert: typeof import('vitest')['assert']
+  const beforeAll: typeof import('vitest')['beforeAll']
+  const beforeEach: typeof import('vitest')['beforeEach']
+  const chai: typeof import('vitest')['chai']
+  const describe: typeof import('vitest')['describe']
+  const expect: typeof import('vitest')['expect']
+  const it: typeof import('vitest')['it']
+  const suite: typeof import('vitest')['suite']
+  const test: typeof import('vitest')['test']
+  const vi: typeof import('vitest')['vi']
+  const vitest: typeof import('vitest')['vitest']
+}

packages/vuetify/components.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

packages/vuetify/package.json

@@ -108,10 +108,7 @@
     "build:lib": "NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .mjs",
     "build:types": "rimraf types-temp && tsc --pretty --emitDeclarationOnly -p tsconfig.dist.json && rollup --config build/rollup.types.config.mjs && rimraf types-temp",
     "tsc": "tsc",
-    "debug:test": "NODE_ENV=test node --inspect --inspect-brk ../../node_modules/jest/bin/jest.js --no-cache -i --verbose",
-    "test": "node build/run-tests.js",
-    "test:unix": "NODE_ENV=test jest",
-    "test:win32": "NODE_ENV=test jest -i",
+    "test": "vitest",
     "test:coverage": "pnpm run test --coverage",
     "lint": "concurrently -n \"tsc,eslint\" --kill-others-on-fail \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint src -f codeframe --max-warnings 0\"",
     "lint:fix": "concurrently -n \"tsc,eslint\" \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint --fix src\"",
@@ -126,18 +123,17 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@jest/globals": "^28.1.3",
     "@percy/cli": "^1.28.2",
     "@percy/cypress": "^3.1.2",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/jest": "^28.1.8",
     "@types/node": "^20.12.7",
     "@types/resize-observer-browser": "^0.1.11",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitest/coverage-v8": "^2.0.5",
     "@vue/babel-plugin-jsx": "^1.2.2",
     "@vue/shared": "^3.4.27",
     "@vue/test-utils": "2.4.6",
@@ -161,7 +157,7 @@
     "expect": "^28.1.3",
     "fast-glob": "^3.3.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest-canvas-mock": "^2.5.2",
+    "jsdom": "^25.0.0",
     "micromatch": "^4.0.5",
     "postcss": "^8.4.38",
     "rollup": "^3.20.7",
@@ -170,10 +166,12 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "timezone-mock": "^1.3.6",
+    "unplugin-auto-import": "0.17.5",
     "unplugin-vue-components": "^0.27.4",
     "upath": "^2.0.1",
     "vite": "^5.4.0",
     "vite-ssr": "^0.17.1",
+    "vitest": "^2.0.5",
     "vue-i18n": "^9.7.1",
     "vue-router": "^4.3.0"
   },

packages/vuetify/src/__tests__/framework.spec.ts

@@ -1,6 +1,6 @@
 // Utilities
-import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { expect, it } from 'vitest'
 import { createVuetify } from '@/framework'
 
 describe('framework', () => {

packages/vuetify/src/auto-imports.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const afterAll: typeof import('vitest')['afterAll']
+  const afterEach: typeof import('vitest')['afterEach']
+  const assert: typeof import('vitest')['assert']
+  const beforeAll: typeof import('vitest')['beforeAll']
+  const beforeEach: typeof import('vitest')['beforeEach']
+  const chai: typeof import('vitest')['chai']
+  const describe: typeof import('vitest')['describe']
+  const expect: typeof import('vitest')['expect']
+  const it: typeof import('vitest')['it']
+  const suite: typeof import('vitest')['suite']
+  const test: typeof import('vitest')['test']
+  const vi: typeof import('vitest')['vi']
+  const vitest: typeof import('vitest')['vitest']
+}

packages/vuetify/src/components.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

packages/vuetify/src/components/VColorPicker/util/__tests__/index.spec.ts

@@ -1,5 +1,5 @@
 // Utilities
-import { describe, expect, it } from '@jest/globals'
+import { expect, it } from 'vitest'
 import { extractColor } from '../'
 
 const red = { h: 0, s: 1, v: 1, a: 1 }

packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts

@@ -12,7 +12,7 @@ import {
 // import Vue from 'vue'
 // import { Lang } from '../../../services/lang'
 // import { preset } from '../../../presets/default'
-// import { resizeWindow } from '../../../../test'
+// import { resizeWindow } from '@/../test'
 
 // Vue.prototype.$vuetify = {
 //   icons: {},

packages/vuetify/src/components/VDataTable/__tests__/headers.spec.ts

@@ -1,7 +1,6 @@
-import { createHeaders } from '../composables/headers'
-
 // Utilities
-import { describe, expect, it } from '@jest/globals'
+import { expect, it } from 'vitest'
+import { createHeaders } from '../composables/headers'
 
 describe('VDataTable headers', () => {
   it('flattens 2d headers', () => {

packages/vuetify/src/components/VDataTable/__tests__/sort.spec.ts

@@ -4,8 +4,8 @@ import { transformItems as _transformItems } from '../composables/items'
 import { sortItems as _sortItems } from '../composables/sort'
 
 // Utilities
-import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { expect, it } from 'vitest'
 
 // Types
 import type { SortItem } from '../composables/sort'

packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.date.spec.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 /* eslint-disable */
 
-// import { touch } from '../../../../test'
+// import { touch } from '@/../test'
 import {
   mount,
   MountOptions,

packages/vuetify/src/components/VDatePicker/util/__tests__/createNativeLocaleFormatter.spec.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
 /* eslint-disable */
 
+import { describe, it } from 'vitest'
 // import createNativeLocaleFormatter from '../createNativeLocaleFormatter'
 
 describe.skip('VDatePicker/util/createNativeLocaleFormatter.ts', () => {

packages/vuetify/src/components/VDatePicker/util/__tests__/sanitizeDateString.spec.ts

@@ -1,5 +1,5 @@
 // Utilities
-import { describe, expect, it } from '@jest/globals'
+import { expect, it } from 'vitest'
 import sanitizeDateString from '../sanitizeDateString'
 
 describe('VDatePicker/util/sanitizeDateString.ts', () => {

packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.tsx

@@ -1,8 +1,8 @@
 import { VFileInput } from '../VFileInput'
 
 // Utilities
-import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
 import { createVuetify } from '@/framework'
 
 describe('VFileInput', () => {
@@ -45,10 +45,10 @@ describe('VFileInput', () => {
   })
 
   it('has affixed icons with actions', () => {
-    const onClickPrepend = jest.fn()
-    const onClickPrependInner = jest.fn()
-    const onClickAppendInner = jest.fn()
-    const onClickAppend = jest.fn()
+    const onClickPrepend = vi.fn()
+    const onClickPrependInner = vi.fn()
+    const onClickAppendInner = vi.fn()
+    const onClickAppend = vi.fn()
 
     const wrapper = mountFunction(
       <VFileInput

packages/vuetify/src/components/VGrid/__tests__/VCol.spec.ts

@@ -1,6 +1,6 @@
 // Utilities
-import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { expect, it } from 'vitest'
 import { VCol } from '../VCol'
 import { createVuetify } from '@/framework'
 

packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts

@@ -3,8 +3,8 @@ import { VItem } from '../VItem'
 import { VItemGroup } from '../VItemGroup'
 
 // Utilities
-import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { expect, it } from 'vitest'
 import { h } from 'vue'
 import { createVuetify } from '@/framework'
 
@@ -120,7 +120,7 @@ describe('VItemGroup', () => {
 
   // https://github.com/vuetifyjs/vuetify/issues/5384
   it('should not unregister children when is destroyed', async () => {
-    const change = jest.fn()
+    const change = vi.fn()
     const wrapper = mountFunction({
       props: {
         modelValue: 'foo',

packages/vuetify/src/components/VItemGroup/__tests__/__snapshots__/VItemGroup.spec.ts.snap

@@ -1,6 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`VItemGroup should render with a specified tag when the tag prop is provided with a value 1`] = `
-<button class="v-item-group v-theme--light">
-</button>
+exports[`VItemGroup > should render with a specified tag when the tag prop is provided with a value 1`] = `
+"<button class="v-item-group v-theme--light">
+  <!---->
+</button>"
 `;

packages/vuetify/src/components/VList/__tests__/VList.spec.ts

@@ -2,8 +2,8 @@
 import { VList } from '..'
 
 // Utilities
-import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { expect, it } from 'vitest'
 import { createVuetify } from '@/framework'
 
 describe('VList', () => {

packages/vuetify/src/components/VList/__tests__/VListItemMedia.spec.ts

@@ -2,8 +2,8 @@
 import { VListItemMedia } from '..'
 
 // Utilities
-import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { expect, it } from 'vitest'
 import { createVuetify } from '@/framework'
 
 describe('VListItemMedia', () => {

packages/vuetify/src/components/VList/__tests__/__snapshots__/VList.spec.ts.snap

@@ -1,9 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`VList should match a snapshot 1`] = `
-<div class="v-list v-theme--light v-list--density-default v-list--one-line"
-     tabindex="0"
-     role="listbox"
->
-</div>
-`;
+exports[`VList > should match a snapshot 1`] = `"<div class="v-list v-theme--light v-list--density-default v-list--one-line" tabindex="0" role="listbox"></div>"`;

packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItemMedia.spec.ts.snap

@@ -1,6 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`VListItemMedia should match a snapshot 1`] = `
-<div class="v-list-item-media">
-</div>
-`;
+exports[`VListItemMedia > should match a snapshot 1`] = `"<div class="v-list-item-media"></div>"`;