feat: use cypress-vite for running e2e tests (#467)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress'
+import vitePreprocessor from 'cypress-vite'
 
 export default defineConfig({
   e2e: {
@@ -6,5 +7,8 @@ export default defineConfig({
     chromeWebSecurity: false,
     specPattern: 'cypress/e2e/**/*.spec.*',
     supportFile: false,
+    setupNodeEvents(on) {
+      on('file:preprocessor', vitePreprocessor())
+    },
   },
 })

package.json

@@ -38,6 +38,7 @@
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
     "cypress": "^12.8.1",
+    "cypress-vite": "^1.3.0",
     "eslint": "^8.36.0",
     "eslint-plugin-cypress": "^2.12.1",
     "https-localhost": "^4.7.1",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ specifiers:
   critters: ^0.0.16
   cross-env: ^7.0.3
   cypress: ^12.8.1
+  cypress-vite: ^1.3.0
   eslint: ^8.36.0
   eslint-plugin-cypress: ^2.12.1
   https-localhost: ^4.7.1
@@ -73,6 +74,7 @@ devDependencies:
   critters: 0.0.16
   cross-env: 7.0.3
   cypress: 12.8.1
+  cypress-vite: 1.3.1_vite@4.2.1
   eslint: 8.36.0
   eslint-plugin-cypress: 2.12.1_eslint@8.36.0
   https-localhost: 4.7.1
@@ -96,7 +98,7 @@ devDependencies:
   vite-plugin-vue-inspector: 3.4.0_vite@4.2.1
   vite-plugin-vue-layouts: 0.8.0_asesa6ksds7mbxqm7d5qamvm34
   vite-plugin-vue-markdown: 0.22.4_vite@4.2.1
-  vite-plugin-webfont-dl: 3.6.0_vite@4.2.1
+  vite-plugin-webfont-dl: 3.6.4_vite@4.2.1
   vite-ssg: 0.22.1_5yp5ffmexyoplwevzih2hx4gpy
   vite-ssg-sitemap: 0.4.3
   vitest: 0.29.7
@@ -3086,16 +3088,6 @@ packages:
       - supports-color
     dev: true
 
-  /@vue/compiler-core/3.2.45:
-    resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
-    dependencies:
-      '@babel/parser': 7.21.3
-      '@vue/shared': 3.2.45
-      estree-walker: 2.0.2
-      source-map: 0.6.1
-    dev: true
-    optional: true
-
   /@vue/compiler-core/3.2.47:
     resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
     dependencies:
@@ -3104,14 +3096,6 @@ packages:
       estree-walker: 2.0.2
       source-map: 0.6.1
 
-  /@vue/compiler-dom/3.2.45:
-    resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
-    dependencies:
-      '@vue/compiler-core': 3.2.45
-      '@vue/shared': 3.2.45
-    dev: true
-    optional: true
-
   /@vue/compiler-dom/3.2.47:
     resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
     dependencies:
@@ -3132,14 +3116,6 @@ packages:
       postcss: 8.4.21
       source-map: 0.6.1
 
-  /@vue/compiler-ssr/3.2.45:
-    resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
-    dependencies:
-      '@vue/compiler-dom': 3.2.45
-      '@vue/shared': 3.2.45
-    dev: true
-    optional: true
-
   /@vue/compiler-ssr/3.2.47:
     resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
     dependencies:
@@ -3189,20 +3165,9 @@ packages:
       '@vue/shared': 3.2.47
       csstype: 2.6.20
 
-  /@vue/server-renderer/3.2.45_vue@3.2.47:
-    resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
-    requiresBuild: true
-    peerDependencies:
-      vue: 3.2.45
-    dependencies:
-      '@vue/compiler-ssr': 3.2.45
-      '@vue/shared': 3.2.45
-      vue: 3.2.47
-    dev: true
-    optional: true
-
   /@vue/server-renderer/3.2.47_vue@3.2.47:
     resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==}
+    requiresBuild: true
     peerDependencies:
       vue: 3.2.47
     dependencies:
@@ -3225,8 +3190,8 @@ packages:
       js-beautify: 1.14.6
       vue: 3.2.47
     optionalDependencies:
-      '@vue/compiler-dom': 3.2.45
+      '@vue/compiler-dom': 3.2.47
-      '@vue/server-renderer': 3.2.45_vue@3.2.47
+      '@vue/server-renderer': 3.2.47_vue@3.2.47
     dev: true
 
   /@vueuse/core/9.13.0_vue@3.2.47:
@@ -3568,8 +3533,8 @@ packages:
     resolution: {integrity: sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==}
     dev: true
 
-  /axios/1.2.5:
+  /axios/1.3.4:
-    resolution: {integrity: sha512-9pU/8mmjSSOb4CXVsvGIevN+MlO/t9OWtKadTaLuN85Gge3HGorUckgp8A/2FH4V4hJ7JuQ3LIeI7KAV9ITZrQ==}
+    resolution: {integrity: sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==}
     dependencies:
       follow-redirects: 1.15.2
       form-data: 4.0.0
@@ -4181,6 +4146,17 @@ packages:
   /csstype/2.6.20:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
 
+  /cypress-vite/1.3.1_vite@4.2.1:
+    resolution: {integrity: sha512-dgLxSkk+rYOp7L/ngm5q+Ps8LBrDi/69qcZSSoJ9T8HN2XQ08qWZ2XcrdewOqb5+TXFRRBCondB7lOZriG5kHg==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0 || ^4.0.0
+    dependencies:
+      debug: 4.3.4
+      vite: 4.2.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /cypress/12.8.1:
     resolution: {integrity: sha512-lIFbKdaSYAOarNLHNFa2aPZu6YSF+8UY4VRXMxJrFUnk6RvfG0AWsZ7/qle/aIz30TNUD4aOihz2ZgS4vuQVSA==}
     engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
@@ -9606,12 +9582,12 @@ packages:
       - rollup
     dev: true
 
-  /vite-plugin-webfont-dl/3.6.0_vite@4.2.1:
+  /vite-plugin-webfont-dl/3.6.4_vite@4.2.1:
-    resolution: {integrity: sha512-3qfRrouQnBqwYZaBqjNeAkaywlZyo+VSM6jnoJk4PiOyo1/n4V4sbwby2QCTdjQwtIIsPTfggXvN6S/wuIcJdg==}
+    resolution: {integrity: sha512-It7kCDI3tLM3++VIQ+S2ARHLNHcpUZRUMo5tpUvIXYFQDkpx7/6p28tKCKiwijkpA7t2yiXhbRfF1ySKx043EQ==}
     peerDependencies:
       vite: ^2 || ^3 || ^4
     dependencies:
-      axios: 1.2.5
+      axios: 1.3.4
       clean-css: 5.3.2
       flat-cache: 3.0.4
       picocolors: 1.0.0