tests: Migrate to Vitest

Author: rkunev

babel.config.js

@@ -6,8 +6,8 @@
   "scripts": {
     "start": "vite",
     "build": "node scripts/build.js",
-    "test": "jest --watch",
-    "test:ci": "jest -i --ci -b",
+    "test": "vitest",
+    "test:ci": "vitest run --coverage --no-file-parallelism --bail 1",
     "lint": "eslint --ext .js,vue src",
     "prepublishOnly": "yarn build",
     "docs:dev": "vitepress dev docs",
@@ -27,27 +27,25 @@
     "@radial-color-picker/rotator": "3.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.14.8",
     "@size-limit/file": "11.0.2",
-    "@vitejs/plugin-vue": "5.0.3",
-    "@vue/babel-preset-app": "4.3.1",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vitest/coverage-v8": "1.3.1",
     "@vue/compiler-sfc": "3.4.15",
-    "@vue/test-utils": "2.0.0-rc.11",
-    "babel-jest": "26.6.3",
+    "@vue/test-utils": "2.4.4",
     "chalk": "4.1.2",
     "cliui": "7.0.4",
     "eslint": "8.57.0",
     "eslint-plugin-vue": "9.22.0",
     "fs-extra": "10.0.0",
     "husky": "9.0.11",
-    "jest": "26.6.3",
+    "jsdom": "24.0.0",
     "lint-staged": "15.2.2",
     "prettier": "3.2.5",
     "size-limit": "11.0.2",
-    "vite": "5.0.12",
+    "vite": "5.1.4",
     "vitepress": "1.0.0-rc.40",
-    "vue": "3.4.15",
-    "vue-jest": "5.0.0-alpha.10"
+    "vitest": "1.3.1",
+    "vue": "3.4.15"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

jest.config.js

@@ -58,7 +58,7 @@ const getBuildConfig = ({ formats, minify }) => {
 
         console.log('Building for production as library (commonjs, es, umd, umd-min)...');
 
-        await build(getBuildConfig({ formats: ['es', 'cjs'] }));
+        await build(getBuildConfig({ formats: ['es', 'cjs'], minify: false }));
         await build(getBuildConfig({ formats: ['umd'], minify: false }));
         await build(getBuildConfig({ formats: ['umd'], minify: true }));
 

package.json

@@ -1,6 +1,5 @@
 <template>
     <div
-        ref="el"
         role="slider"
         :aria-roledescription="ariaRoledescription"
         :aria-label="ariaLabel"
@@ -138,7 +137,7 @@
             );
 
             // ignore testing code that will be removed by dead code elimination for production
-            // istanbul ignore next
+            /* v8 ignore next 5 */
             if (process.env.NODE_ENV === 'development' && props.initiallyCollapsed && props.variant === 'persistent') {
                 console.warn(
                     `Incorrect config: using variant="persistent" and :initiallyCollapsed="true" at the same time is not supported.`
@@ -147,7 +146,7 @@
 
             onMounted(() => {
                 // the Rorator module already has an extensive test suite
-                // istanbul ignore next
+                /* v8 ignore next 10 */
                 rcp = new Rotator(rotator.value, {
                     angle: angle.value,
                     onRotate(hue) {
@@ -229,7 +228,6 @@
                 rcp,
 
                 // refs
-                el,
                 rotator,
 
                 // state

scripts/build.js

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Init renders correctly 1`] = `
+exports[`Init > renders correctly 1`] = `
 <div
   aria-disabled="false"
   aria-expanded="true"
@@ -16,7 +16,7 @@ exports[`Init renders correctly 1`] = `
   tabindex="0"
 >
   <div
-    class="rcp__palette in"
+    class="rcp__palette"
   />
   <div
     class="rcp__rotator"