chore: replace cypress with vitest (#20445)

Co-authored-by: John Leider <[email protected]>

.github/actions/pnpm-install/action.yml

@@ -4,18 +4,12 @@ description: Restore node_modules and cache, then run pnpm install
 runs:
   using: composite
   steps:
-    - uses: actions/cache@v4
-      with:
-        path: |
-          node_modules
-          **/node_modules
-          /home/runner/.cache/pnpm
-          /home/runner/.cache/Cypress
-          /home/runner/.pnpm-store
-        key: pnpm-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}
+    - uses: pnpm/action-setup@v4
     - uses: actions/setup-node@v4
       with:
-        node-version-file: .nvmrc
-    - uses: pnpm/action-setup@v4
+        cache: 'pnpm'
+        node-version-file: '.nvmrc'
+    - run: pnpm --version
+      shell: bash
     - run: pnpm i --frozen-lockfile
       shell: bash

.github/workflows/ci.yml

@@ -67,7 +67,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/pnpm-install
-      - run: pnpm run test
+      - run: pnpm run test --project unit
         working-directory: ./packages/vuetify
 
   test-e2e:
@@ -78,20 +78,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/pnpm-install
-      - run: pnpm cy:run --record --parallel --ci-build-id $GITHUB_RUN_ID
-        if: ${{ !startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs' }}
+      - run: pnpm run test --project browser
         working-directory: ./packages/vuetify
-        env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-      - run: pnpm cy:run
-        if: ${{ !startswith(github.ref, 'refs/tags/v') && github.repository_owner != 'vuetifyjs' }}
-        working-directory: ./packages/vuetify
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: cypress-screenshots
-          path: ./packages/vuetify/cypress/screenshots/
-          if-no-files-found: ignore
 
   deploy:
     needs: [lint, test-unit, test-e2e, build-vuetify]

.gitignore

@@ -21,5 +21,8 @@ coverage/
 cypress/screenshots
 cypress/videos
 
+# vitest
+__screenshots__/
+
 .vercel
 .now

eslint-local-rules.js

@@ -6,7 +6,6 @@ module.exports = {
   'jsx-condition-key': require('./scripts/rules/jsx-condition-key'),
   'jsx-curly-spacing': require('./scripts/rules/jsx-curly-spacing'),
   '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

@@ -85,12 +85,15 @@
     "vue-tsc": "^2.0.29",
     "yargs": "^17.7.2"
   },
-  "packageManager": "pnpm@9.6.0",
+  "packageManager": "pnpm@9.10.0",
   "pnpm": {
     "patchedDependencies": {
-      "@mdi/[email protected]": "patches/@[email protected]"
+      "@mdi/[email protected]": "patches/@[email protected]",
+      "@testing-library/vue": "patches/@testing-library__vue.patch"
     },
     "overrides": {
+      "@testing-library/dom": "npm:@vuetify/[email protected]",
+      "@types/node": "22.5.4",
       "tough-cookie": "5.0.0-rc.4"
     }
   }

packages/docs/package.json

@@ -81,7 +81,7 @@
     "unplugin-auto-import": "0.17.5",
     "unplugin-fonts": "1.0.3",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.0",
+    "vite": "^5.4.3",
     "vite-plugin-md": "^0.21.5",
     "vite-plugin-pages": "^0.32.1",
     "vite-plugin-pwa": "^0.17.4",

packages/vuetify/.eslintignore

@@ -9,3 +9,5 @@
 /lib-temp/
 /dist/
 /cypress/
+*.spec.cy.ts
+*.spec.cy.tsx

packages/vuetify/.eslintrc.js

@@ -44,46 +44,20 @@ module.exports = {
       },
     },
     {
-      files: '**/*.spec.{ts,tsx}',
-      env: {
-        'jest/globals': true,
-      },
-      plugins: ['jest'],
-      extends: ['plugin:jest/recommended'],
+      files: '**/*.spec.?(browser.){ts,tsx}',
+      plugins: ['vitest'],
+      extends: ['plugin:vitest/recommended'],
       rules: {
         'local-rules/vitest-global-imports': 'error',
 
         'no-restricted-imports': 'off',
 
-        'jest/no-disabled-tests': 'off',
-        'jest/no-large-snapshots': 'warn',
-        'jest/prefer-spy-on': 'warn',
-        'jest/prefer-to-be': 'warn',
-        'jest/prefer-to-contain': 'warn',
-        'jest/prefer-to-have-length': 'warn',
-        'jest/no-standalone-expect': 'off',
-        'jest/no-conditional-expect': 'off',
-        'jest/no-identical-title': 'off',
-      },
-    },
-    {
-      files: '**/*.spec.cy.{ts,tsx}',
-      env: {
-        'cypress/globals': true,
-      },
-      plugins: ['cypress'],
-      extends: ['plugin:cypress/recommended'],
-      rules: {
-        'local-rules/cypress-types-reference': 'error',
-
-        'no-restricted-imports': 'off',
-
-        'no-unused-expressions': 'off',
-        'cypress/no-assigning-return-values': 'error',
-        'cypress/no-unnecessary-waiting': 'warn',
-        'cypress/assertion-before-screenshot': 'warn',
-        'cypress/no-async-tests': 'error',
-        'cypress/unsafe-to-chain-command': 'off',
+        'vitest/no-commented-out-tests': 'off',
+        'vitest/no-large-snapshots': 'warn',
+        'vitest/prefer-spy-on': 'warn',
+        'vitest/prefer-to-be': 'warn',
+        'vitest/prefer-to-contain': 'warn',
+        'vitest/prefer-to-have-length': 'warn',
       },
     },
   ],

packages/vuetify/package.json

@@ -109,11 +109,14 @@
     "build:types": "rimraf types-temp && tsc --pretty --emitDeclarationOnly -p tsconfig.dist.json && rollup --config build/rollup.types.config.mjs && rimraf types-temp",
     "tsc": "tsc",
     "test": "vitest",
+    "test:unit": "vitest --project unit",
+    "test:browser": "vitest --project browser",
+    "test:open": "TEST_BAIL=1 vitest --project browser -w",
     "test:coverage": "pnpm run test --coverage",
+    "test:percy": "percy exec -- vitest --project browser",
+    "test:all": "concurrently -gr 'vitest --project unit' 'vitest --project browser --shard=1/5' 'vitest --project browser --shard=2/5' 'vitest --project browser --shard=3/5' 'vitest --project browser --shard=4/5' 'vitest --project browser --shard=5/5'",
     "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\"",
-    "cy:open": "cypress open --component -b electron",
-    "cy:run": "percy exec -- cypress run --component"
+    "lint:fix": "concurrently -n \"tsc,eslint\" \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint --fix src\""
   },
   "devDependencies": {
     "@date-io/core": "3.0.0",
@@ -123,17 +126,22 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@percy/cli": "^1.28.2",
-    "@percy/cypress": "^3.1.2",
+    "@percy/cli": "^1.29.3",
+    "@percy/sdk-utils": "^1.29.3",
     "@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/node": "^20.12.7",
+    "@testing-library/dom": "npm:@vuetify/[email protected]",
+    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/vue": "^8.1.0",
+    "@types/node": "^22.5.4",
     "@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",
+    "@vitest/browser": "^2.1.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
     "@vue/babel-plugin-jsx": "^1.2.2",
     "@vue/shared": "^3.4.27",
     "@vue/test-utils": "2.4.6",
@@ -147,19 +155,17 @@
     "cssnano": "^6.1.2",
     "csstype": "^3.1.3",
     "cy-mobile-commands": "^0.3.0",
-    "cypress": "^13.7.2",
-    "cypress-file-upload": "^5.0.8",
-    "cypress-real-events": "^1.12.0",
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
-    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-jest": "^28.7.0",
+    "eslint-plugin-vitest": "0.4.1",
     "expect": "^28.1.3",
     "fast-glob": "^3.3.2",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^25.0.0",
     "micromatch": "^4.0.5",
     "postcss": "^8.4.38",
+    "roboto-fontface": "^0.10.0",
     "rollup": "^3.20.7",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-sass": "^1.12.21",
@@ -169,11 +175,12 @@
     "unplugin-auto-import": "0.17.5",
     "unplugin-vue-components": "^0.27.4",
     "upath": "^2.0.1",
-    "vite": "^5.4.0",
+    "vite": "^5.4.3",
     "vite-ssr": "^0.17.1",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.1",
     "vue-i18n": "^9.7.1",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "webdriverio": "^8.40.5"
   },
   "peerDependencies": {
     "typescript": ">=4.7",

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

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