vitest initiative

package.json

@@ -15,8 +15,8 @@
     "url": "https://github.com/perfect-things/ui.git"
   },
   "scripts": {
-    "test-coverage": "jest --coverage",
-    "test": "jest",
+    "coverage": "vitest --coverage",
+    "test": "vitest",
     "changelog": "marked --no-mangle --no-header-ids --gfm -i CHANGELOG.md -o docs-src/pages/changelog.svelte",
     "lint": "gulp lint",
     "dist": "gulp prod",
@@ -34,12 +34,11 @@
     "@babel/preset-env": "^7.22.5",
     "@esbuild-plugins/node-resolve": "^0.2.2",
     "@ronilaukkarinen/gulp-stylelint": "^14.1.1",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/svelte": "3.2.2",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.2",
-    "babel-jest": "^29.5.0",
     "del": "^7.0.0",
     "esbuild-svelte": "^0.7.4",
     "eslint": "^8.44.0",
@@ -54,16 +53,15 @@
     "gulp-livereload": "^4.0.2",
     "gulp-webserver": "^0.9.1",
     "husky": "^8.0.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jsdom": "^22.1.0",
     "marked": "^5.1.0",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
     "stylelint": "^15.9.0",
     "stylelint-config-standard": "^33.0.0",
     "svelte": "3.59.2",
-    "svelte-jester": "^2.3.2",
-    "through2": "^4.0.2"
+    "through2": "^4.0.2",
+    "vitest": "^0.32.4"
   },
   "overrides": {
     "chokidar": "^3.5.3",

tests/Autocomplete-utils.spec.js

@@ -1,3 +1,5 @@
+import { vi } from 'vitest';
+
 import * as utils from '../src/autocomplete/utils';
 import { offsetHeight, offsetTop } from './helpers/utils';
 
@@ -18,11 +20,11 @@ const groupedData = [
 
 
 beforeEach(() => {
-	jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+	vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
 });
 
 afterEach(() => {
-	window.requestAnimationFrame.mockRestore();
+	vi.restoreAllMocks();
 });
 
 

tests/Button.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Button } from '../src/button';
 import { render, fireEvent } from '@testing-library/svelte';
 import SlotTest from './helpers/Button.svelte';
@@ -10,7 +11,7 @@ test('Button', async () => {
 		class: 'test-class',
 	};
 	const { getByTitle, component } = render(Button, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('click', mock);
 
 	const btn = getByTitle('Button1');

tests/Checkbox.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Checkbox } from '../src/input';
 import { render, fireEvent } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
@@ -15,7 +16,7 @@ test('Checkbox', async () => {
 		error: 'error',
 	};
 	const { getByTitle, component } = render(Checkbox, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const chbox = getByTitle('Checkbox1');

tests/Datepicker.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Datepicker } from '../src/datepicker';
 import { render, fireEvent } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
@@ -16,7 +17,7 @@ test('Datepicker', async () => {
 		showOnFocus: true
 	};
 	const { container, component } = render(Datepicker, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const cmp = container.querySelector('.test-class');

tests/Dialog.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Dialog } from '../src/dialog';
 import { render, fireEvent } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
@@ -10,8 +11,8 @@ test('Dialog', async () => {
 		class: 'test-class',
 	};
 	const { container, component } = render(Dialog, props);
-	const openMock = jest.fn();
-	const closeMock = jest.fn();
+	const openMock = vi.fn();
+	const closeMock = vi.fn();
 	component.$on('open', openMock);
 	component.$on('close', closeMock);
 

tests/Drawer.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Drawer } from '../src/drawer';
 import { render, fireEvent } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
@@ -11,8 +12,8 @@ test('Drawer', async () => {
 	};
 	const { container, component } = render(Drawer, props);
 
-	const openMock = jest.fn();
-	const closeMock = jest.fn();
+	const openMock = vi.fn();
+	const closeMock = vi.fn();
 	component.$on('open', openMock);
 	component.$on('close', closeMock);
 

tests/InputMath.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { render } from '@testing-library/svelte';
 import { InputMath } from '../src/input';
 import userEvent from '@testing-library/user-event';
@@ -18,7 +19,7 @@ const props = {
 
 test('InputMath', async () => {
 	const { container, component, getByTitle } = render(InputMath, props);
-	const mock = jest.fn();
+	const mock = 	vi.fn();
 	component.$on('change', mock);
 
 	const cmp = container.querySelector('.test-class');

tests/InputNumber.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { render } from '@testing-library/svelte';
 import { InputNumber } from '../src/input';
 import userEvent from '@testing-library/user-event';
@@ -18,7 +19,7 @@ const props = {
 
 test('InputNumber', async () => {
 	const { container, component, getByTitle } = render(InputNumber, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const cmp = container.querySelector('.test-class');

tests/InputPassword.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { fireEvent, render } from '@testing-library/svelte';
 import { InputPassword } from '../src/input';
 import userEvent from '@testing-library/user-event';
@@ -21,7 +22,7 @@ test('InputPassword', async () => {
 	window.zxcvbn = zxcvbn;
 
 	const { container, component, getByTitle } = render(InputPassword, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const cmp = container.querySelector('.test-class');

tests/InputText.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { render } from '@testing-library/svelte';
 import { InputText } from '../src/input';
 import { waitForTimeout } from './helpers/utils';
@@ -17,7 +18,7 @@ const props = {
 
 test('InputText', async () => {
 	const { container, component, getByTitle } = render(InputText, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const cmp = container.querySelector('.test-class');

tests/MessageBox.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { MessageBox, MessageType, showMessage } from '../src/message-box';
 import { render, fireEvent } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
@@ -43,7 +44,7 @@ test('MessageBox', async () => {
 
 
 	// third message box - complex
-	const cb = jest.fn();
+	const cb = vi.fn();
 	const cfg = {
 		message: 'Are you sure you want to delete this thing?',
 		type: MessageType.DANGER,

tests/NotificationCenter.spec.js

@@ -1,11 +1,12 @@
+import { vi } from 'vitest';
 import { NotificationCenter, showNotification, hideNotification } from '../src/notification-center';
 import { fireEvent, render } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
 
 
 test('NotificationCenter', async () => {
 	const { container } = render(NotificationCenter);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	const toastSelector = '.notification-center .notification';
 
 	const cmp = container.querySelector('.notification-center');

tests/Panel.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Panel } from '../src/panel';
 import { render, fireEvent } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
@@ -11,8 +12,8 @@ test('Panel', async () => {
 	};
 	const { container, component } = render(Panel, props);
 
-	const openMock = jest.fn();
-	const closeMock = jest.fn();
+	const openMock = vi.fn();
+	const closeMock = vi.fn();
 	component.$on('open', openMock);
 	component.$on('close', closeMock);
 

tests/PushButton.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { PushButton } from '../src/push-button';
 import { render, fireEvent } from '@testing-library/svelte';
 
@@ -9,7 +10,7 @@ test('PushButton', async () => {
 		class: 'test-class',
 	};
 	const { getByTitle, component } = render(PushButton, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const btn = getByTitle('Button1');

tests/Radio.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Radio } from '../src/input';
 import { render, fireEvent } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
@@ -20,7 +21,7 @@ test('Radio', async () => {
 		items
 	};
 	const { getByTitle, component } = render(Radio, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const cmp = getByTitle(props.title);

tests/Table.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import Table from './helpers/Table.svelte';
 import { render, fireEvent } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
@@ -6,8 +7,8 @@ import userEvent from '@testing-library/user-event';
 test('Table', async () => {
 	const { container, component } = render(Table);
 
-	const clickMock = jest.fn();
-	const selectMock = jest.fn();
+	const clickMock = vi.fn();
+	const selectMock = vi.fn();
 	component.$on('click', clickMock);
 
 	const cmp = container.querySelector('.test-class');

tests/Textarea.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { render } from '@testing-library/svelte';
 import { Textarea } from '../src/input';
 import { waitForTimeout } from './helpers/utils';
@@ -17,7 +18,7 @@ const props = {
 
 test('InputText', async () => {
 	const { container, component, getByTitle } = render(Textarea, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const cmp = container.querySelector('.test-class');

tests/Toaster.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Toaster, showToast, hideToast } from '../src/toaster';
 import { fireEvent, render } from '@testing-library/svelte';
 import { waitForTimeout } from './helpers/utils';
@@ -8,7 +9,7 @@ test('Toaster', async () => {
 		position: 'bottom'
 	};
 	const { container } = render(Toaster, props);
-	const mock = jest.fn();
+	const mock = vi.fn();
 
 	const cmp = container.querySelector('.toaster');
 	expect(cmp).toBeInTheDocument();

tests/Toggle.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Toggle } from '../src/toggle';
 import { render, fireEvent } from '@testing-library/svelte';
 
@@ -11,7 +12,7 @@ test('Toggle', async () => {
 	};
 	const { container, getByTitle, component } = render(Toggle, props);
 
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('change', mock);
 
 	const cmp = container.querySelector('.test-class');

tests/Tree.spec.js

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { Tree } from '../src/tree';
 import { render, fireEvent } from '@testing-library/svelte';
 
@@ -17,7 +18,7 @@ test('Tree', async () => {
 	const props = { items, class: 'test-class' };
 	const { container, component } = render(Tree, props);
 
-	const mock = jest.fn();
+	const mock = vi.fn();
 	component.$on('select', mock);
 
 	const cmp = container.querySelector('.test-class');

tests/helpers/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

tests/helpers/utils.js

@@ -1,33 +1,34 @@
+import { vi } from 'vitest';
 import { get } from 'svelte/store';
 import { ANIMATION_SPEED } from '../../src';
 
 // workaround for structuredClone not being available in JSDOM
 window.structuredClone = (val) => JSON.parse(JSON.stringify(val));
 
 // workaround for ResizeObserver not being available in JSDOM
-window.ResizeObserver = jest.fn().mockImplementation(() => ({
-	disconnect: jest.fn(),
-	observe: jest.fn(),
-	unobserve: jest.fn(),
+window.ResizeObserver = vi.fn().mockImplementation(() => ({
+	disconnect: vi.fn(),
+	observe: vi.fn(),
+	unobserve: vi.fn(),
 }));
 
 // workaround for window.matchMedia not being available in JSDOM
-window.matchMedia = jest.fn().mockImplementation(() => ({
+window.matchMedia = vi.fn().mockImplementation(() => ({
 	matches: false,
-	addEventListener: jest.fn(),
+	addEventListener: vi.fn(),
 }));
 
 // workaround for element.animate not being available in JSDOM
-window.Element.prototype.animate = jest.fn().mockImplementation(() => {
+window.Element.prototype.animate = vi.fn().mockImplementation(() => {
 	const obj = {
-		onfinish: jest.fn(),
-		oncancel: jest.fn(),
+		onfinish: vi.fn(),
+		oncancel: vi.fn(),
 	};
 	requestAnimationFrame(() => obj.onfinish());
 	return obj;
 });
 
-window.Element.prototype.scrollIntoView = jest.fn().mockImplementation(() => {});
+window.Element.prototype.scrollIntoView = vi.fn().mockImplementation(() => {});
 
 
 export function offsetHeight (el, value = 50) {