Upgrade dependency

Change the test framework to Vitest
meshareL · Apr 12, 2024 · 724500b · 724500b
1 parent 5d6c1ff
commit 724500b
Show file tree

Hide file tree

Showing 9 changed files with 3,324 additions and 11,091 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+coverage
 
 .idea
 *.iws

diff --git a/babel.config.js b/babel.config.js
@@ -1,7 +1,6 @@
-'use strict';
-const pkg = require('./package.json');
+import pkg from './package.json' assert { type: 'json' };
 
-module.exports = {
+export default {
     presets: [
         ['@babel/preset-env', {
             // debug: true,
@@ -21,6 +20,7 @@ module.exports = {
         }],
         ['babel-plugin-polyfill-corejs3', {
             // debug: true,
+            exclude: [ 'es.array.push', 'es.array.unshift' ],
             method: 'usage-pure',
             version: pkg.devDependencies['core-js-pure'],
             proposals: true

diff --git a/jest.config.js b/jest.config.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "4.0.1",
   "description": "A SVG icon component for Vue",
   "author": "Lu Mengyao",
+  "type": "module",
   "homepage": "https://github.com/meshareL/j-icon",
   "repository": {
     "type": "git",
@@ -30,37 +31,39 @@
   },
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "rollup -c --strictDeprecations",
-    "test": "jest",
+    "build": "rollup -c",
+    "test": "vitest run",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "vue": "3.x"
   },
   "dependencies": {
-    "type-fest": "^3.7.2"
+    "type-fest": "^4.15.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-typescript": "^7.21.4",
-    "@babel/runtime": "^7.21.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@types/jest": "^29.5.0",
-    "@types/node": "^18.15.11",
-    "@vue/test-utils": "^2.3.2",
-    "babel-plugin-polyfill-corejs3": "^0.7.1",
-    "core-js-pure": "^3.29.1",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "rimraf": "^4.4.1",
-    "rollup": "^3.20.2",
-    "typescript": "^5.0.3",
+    "@babel/core": "^7.24.4",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-typescript": "^7.24.1",
+    "@babel/runtime": "^7.24.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.12.7",
+    "@vitest/coverage-v8": "^1.5.0",
+    "@vue/test-utils": "^2.4.5",
+    "babel-plugin-polyfill-corejs3": "^0.10.4",
+    "core-js-pure": "^3.36.1",
+    "jsdom": "^24.0.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.14.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
+    "vitest": "^1.5.0",
     "vue": "^3.2.47"
   }
 }
diff --git a/rollup.config.cjs → rollup.config.js b/rollup.config.cjs → rollup.config.js
@@ -1,16 +1,15 @@
-const { defineConfig } = require('rollup')
-    , nodeResolve = require('@rollup/plugin-node-resolve')
-    , commonjs = require('@rollup/plugin-commonjs')
-    , typescript = require('@rollup/plugin-typescript')
-    , babel = require('@rollup/plugin-babel')
-    , terser = require('@rollup/plugin-terser')
-    , pkg = require('./package.json');
+import { defineConfig } from 'rollup';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import babel from '@rollup/plugin-babel';
+import terser from '@rollup/plugin-terser';
 
-module.exports = defineConfig({
+export default defineConfig({
     input: 'src/index.ts',
     output: [
         {
-            file: pkg.module,
+            file: 'dist/index.esm.js',
             format: 'module',
             sourcemap: true
         },
@@ -22,7 +21,7 @@ module.exports = defineConfig({
         },
         {
             name: 'JIcon',
-            file: pkg.main,
+            file: 'dist/index.umd.js',
             exports: 'named',
             format: 'umd',
             sourcemap: true,
@@ -42,11 +41,11 @@ module.exports = defineConfig({
     plugins: [
         nodeResolve(),
         commonjs(),
-        typescript(),
+        typescript({ include: 'src/**/*.ts', noForceEmit: true }),
         babel({
             exclude: 'node_modules/**',
             babelHelpers: 'runtime',
-            extensions: ['.js', '.ts', '.cjs', '.mjs']
+            extensions: [ '.js', '.ts', '.cjs', '.mjs' ]
         })
     ]
 });
diff --git a/test/index.spec.ts b/test/index.spec.ts
@@ -1,10 +1,9 @@
-'use strict';
-import {describe, it, beforeEach, afterEach, expect, jest} from '@jest/globals';
-import {shallowMount, enableAutoUnmount} from '@vue/test-utils';
-import type {VueWrapper} from '@vue/test-utils';
-import JIcon, {plugin} from '../src';
-import icons, {alert, code, x} from './icon';
-import type {Icon} from '../index';
+import { describe, it, beforeEach, afterEach, expect, vitest } from 'vitest';
+import { shallowMount, enableAutoUnmount } from '@vue/test-utils';
+import type { VueWrapper } from '@vue/test-utils';
+import JIcon, { plugin } from '../src';
+import icons, { alert, code, x } from './icon';
+import type { Icon } from '../index';
 
 enableAutoUnmount(afterEach);
 
@@ -13,25 +12,27 @@ describe('Vue j-icon component', () => {
         describe('register global component', () => {
             it('default name', () => {
                 const element = shallowMount(JIcon, {
-                    props: {icon: alert},
-                    global: {plugins: [[plugin]]}});
+                    props: { icon: alert },
+                    global: { plugins: [ [ plugin ] ] }
+                });
                 expect(element.vm.$.appContext.app.component(JIcon.displayName!)).not.toBeUndefined();
             });
 
             it('custom name', () => {
                 const name = 'CustomName'
                     , element = shallowMount(JIcon, {
-                    props: {icon: alert},
-                    global: {plugins: [[plugin, {name}]]}});
+                    props: { icon: alert },
+                    global: { plugins: [ [ plugin, { name } ] ] }
+                });
                 expect(element.vm.$.appContext.app.component(name)).not.toBeUndefined();
             });
         });
 
         describe('prefix option', () => {
             it('no prefix', () => {
                 const element = shallowMount(JIcon, {
-                    props: {icon: alert},
-                    global: {plugins: [[plugin, {prefix: false}]]}
+                    props: { icon: alert },
+                    global: { plugins: [ [ plugin, { prefix: false } ] ] }
                 });
 
                 expect(element.exists()).toBe(true);
@@ -43,31 +44,31 @@ describe('Vue j-icon component', () => {
 
             it('default prefix', () => {
                 const element = shallowMount(JIcon, {
-                    props: {icon: alert},
-                    global: {plugins: [[plugin, {prefix: true}]]}
+                    props: { icon: alert },
+                    global: { plugins: [ [ plugin, { prefix: true } ] ] }
                 });
 
                 expect(element.exists()).toBe(true);
-                expect(element.classes()).toContain(`icon-${alert.name}`);
+                expect(element.classes()).toContain(`icon-${ alert.name }`);
             });
 
             it('custom prefix', () => {
                 const prefix = 'custom-'
                     , element = shallowMount(JIcon, {
-                    props: {icon: alert},
-                    global: {plugins: [[plugin, {prefix}]]}
+                    props: { icon: alert },
+                    global: { plugins: [ [ plugin, { prefix } ] ] }
                 });
 
                 expect(element.exists()).toBe(true);
-                expect(element.classes()).toContain(`${prefix}${alert.name}`);
+                expect(element.classes()).toContain(`${ prefix }${ alert.name }`);
             })
         });
 
         it('classes option', () => {
-            const value = ['0123456789', '9876543210']
+            const value = [ '0123456789', '9876543210' ]
                 , element = shallowMount(JIcon, {
-                props: {icon: alert},
-                global: {plugins: [[plugin, {classes: [value]}]]}
+                props: { icon: alert },
+                global: { plugins: [ [ plugin, { classes: [ value ] } ] ] }
             });
 
             expect(element.exists()).toBe(true);
@@ -85,22 +86,25 @@ describe('Vue j-icon component', () => {
         }
 
         it('from SVG name', () => {
-            const element = shallowMount(JIcon, {props: {icon: 'x'}, global: {plugins: [[plugin, {icons}]]}});
+            const element = shallowMount(JIcon, {
+                props: { icon: 'x' },
+                global: { plugins: [ [ plugin, { icons } ] ] }
+            });
             assertion(element, x);
         });
 
         it('from icon detail', () => {
-            const element = shallowMount(JIcon, {props: {icon: code}});
+            const element = shallowMount(JIcon, { props: { icon: code } });
             assertion(element, code);
         });
 
         it('size rollback to the viewBox', () => {
-            const element = shallowMount(JIcon, {props: {icon: alert}});
+            const element = shallowMount(JIcon, { props: { icon: alert } });
             assertion(element, alert);
         });
 
         it('inherit undeclared properties', () => {
-            const element = shallowMount(JIcon, {props: {icon: alert, version: '1.1'}});
+            const element = shallowMount(JIcon, { props: { icon: alert, version: '1.1' } });
             assertion(element, alert);
             expect(element.attributes('version')).toBe('1.1');
         });
@@ -109,15 +113,15 @@ describe('Vue j-icon component', () => {
     describe('component props', () => {
         let element: VueWrapper;
         beforeEach(() => {
-            element = shallowMount(JIcon, {props: {icon: x}});
+            element = shallowMount(JIcon, { props: { icon: x } });
             expect(element.exists()).toBeTruthy();
         });
 
         it('width', async () => {
             expect(element.attributes('width')).toBe(String(x.size![0]));
 
             const width = String(x.size![0] + 1);
-            await element.setProps({width});
+            await element.setProps({ width });
 
             expect(element.attributes('width')).toBe(width);
         });
@@ -126,33 +130,33 @@ describe('Vue j-icon component', () => {
             expect(element.attributes('height')).toBe(String(x.size![1]));
 
             const height = String(x.size![1] + 1);
-            await element.setProps({height});
+            await element.setProps({ height });
 
             expect(element.attributes('height')).toBe(height);
         });
 
-        it.each(['0', '1'])('tabindex GE 0, aria-hidden become false', async (value: string) => {
+        it.each([ '0', '1' ])('tabindex GE 0, aria-hidden become false', async (value: string) => {
             expect(element.attributes('aria-hidden')).toBe('true');
 
-            await element.setProps({tabindex: value});
+            await element.setProps({ tabindex: value });
             expect(element.attributes('tabindex')).toBe(value);
             expect(element.attributes('aria-hidden')).toBe('false');
         });
 
         it('tabindex less 0, aria-hidden become true', async () => {
             const value = '-1';
-            element = shallowMount(JIcon, {props: {icon: x, tabindex: value}});
+            element = shallowMount(JIcon, { props: { icon: x, tabindex: value } });
 
             expect(element.attributes('tabindex')).toBe(value);
             expect(element.attributes('aria-hidden')).toBe('true');
         });
 
-        it.each(['invalid', NaN])(
+        it.each([ 'invalid', NaN ])(
             'tabindex invalid string or NaN, not change aria-hidden',
             async (value: number | string) => {
                 expect(element.attributes('aria-hidden')).toBe('true');
 
-                await element.setProps({tabindex: value});
+                await element.setProps({ tabindex: value });
 
                 expect(element.attributes('tabindex')).toBeUndefined();
                 expect(element.attributes('aria-hidden')).toBe('true');
@@ -163,7 +167,7 @@ describe('Vue j-icon component', () => {
             expect(element.attributes('aria-hidden')).toBe('true');
 
             const text = 'aria label';
-            await element.setProps({ariaLabel: text});
+            await element.setProps({ ariaLabel: text });
 
             expect(element.attributes('aria-label')).toBe(text);
             expect(element.attributes('aria-hidden')).toBe('false');
@@ -174,7 +178,7 @@ describe('Vue j-icon component', () => {
             expect(element.attributes('aria-hidden')).toBe('true');
 
             const text = 'aria description';
-            await element.setProps({ariaDescription: text});
+            await element.setProps({ ariaDescription: text });
 
             expect(element.attributes('aria-description')).toBe(text);
             expect(element.attributes('aria-hidden')).toBe('false');
@@ -185,7 +189,7 @@ describe('Vue j-icon component', () => {
             expect(element.attributes('aria-hidden')).toBe('true');
 
             const text = 'title';
-            await element.setProps({title: text});
+            await element.setProps({ title: text });
 
             const titleElement = element.find('title');
 
@@ -200,7 +204,7 @@ describe('Vue j-icon component', () => {
             expect(element.attributes('aria-hidden')).toBe('true');
 
             const text = 'desc';
-            await element.setProps({desc: text});
+            await element.setProps({ desc: text });
 
             const descElement = element.find('desc');
 
@@ -213,8 +217,8 @@ describe('Vue j-icon component', () => {
 
     describe('event', () => {
         it('bind event', () => {
-            const onClick = jest.fn<(event: MouseEvent) => void>()
-                , element = shallowMount(JIcon, {props: {icon: alert}, attrs: {onClick}});
+            const onClick = vitest.fn<[ MouseEvent ], void>()
+                , element = shallowMount(JIcon, { props: { icon: alert }, attrs: { onClick } });
             element.trigger('click');
 
             expect(onClick).toBeCalledTimes(1);