Migrate Svelte component to Vitest, update dependencies

components/svelte/jest.config.js

@@ -3,13 +3,14 @@ module.exports = {
 	verbose: true,
 	transform: {
 		'^.+\\.svelte$': 'svelte-jester',
+		'^.+\\.ts$': [
+			'ts-jest',
+			{
+				tsconfig: 'tests/tsconfig.json',
+			},
+		],
 	},
 	preset: 'ts-jest',
 	testEnvironment: 'node',
 	testMatch: ['**/tests/**/*.test.ts'],
-	globals: {
-		'ts-jest': {
-			tsconfig: 'tests/tsconfig.json',
-		},
-	},
 };

components/svelte/package.json

@@ -23,7 +23,7 @@
 		"build:tsc": "tsc -b",
 		"build:bundles": "rollup -c rollup.config.js",
 		"build:api": "node build --only-api",
-		"test": "jest --runInBand"
+		"test": "vitest"
 	},
 	"dependencies": {
 		"@iconify/types": "workspace:^"
@@ -31,22 +31,21 @@
 	"devDependencies": {
 		"@iconify/core": "workspace:^",
 		"@iconify/utils": "workspace:^",
-		"@microsoft/api-extractor": "^7.25.2",
+		"@microsoft/api-extractor": "^7.30.0",
-		"@rollup/plugin-node-resolve": "^13.3.0",
+		"@rollup/plugin-node-resolve": "^14.0.0",
-		"@rollup/plugin-typescript": "^8.3.3",
+		"@rollup/plugin-typescript": "^8.5.0",
-		"@testing-library/jest-dom": "^5.16.4",
+		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
-		"@testing-library/svelte": "^3.1.3",
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/svelte": "^3.2.1",
 		"@tsconfig/svelte": "^3.0.0",
-		"@types/jest": "^27.5.2",
+		"@types/jest": "^29.0.0",
-		"jest": "^28.1.1",
+		"@types/node": "^18.7.15",
-		"jest-environment-jsdom": "^28.1.1",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.75.6",
+		"rollup": "^2.79.0",
 		"rollup-plugin-svelte": "^7.1.0",
-		"svelte": "3.39",
+		"svelte": "3.50.0",
-		"svelte-jester": "^2.3.2",
 		"svelte-preprocess": "^4.10.7",
-		"ts-jest": "28.0.0-next.3"
+		"vitest": "^0.23.1"
 	},
 	"peerDependencies": {
 		"svelte": ">=3"

components/svelte/tests/api/20-rendering-from-api.test.ts

@@ -143,7 +143,7 @@ describe('Rendering icon', () => {
 
 		// Should render empty icon
 		const html = component.container.innerHTML;
-		expect(html).toBe('<div></div>');
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
 
 		// onLoad should not have been called yet
 		expect(onLoadCalled).toBe(false);
@@ -173,17 +173,23 @@ describe('Rendering icon', () => {
 				tick()
 					.then(() => {
 						const html = component.container.innerHTML;
-						expect(html).toBe('<div></div>');
+						expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
+							'<div></div>'
+						);
 						return tick();
 					})
 					.then(() => {
 						const html = component.container.innerHTML;
-						expect(html).toBe('<div></div>');
+						expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
+							'<div></div>'
+						);
 						return tick();
 					})
 					.then(() => {
 						const html = component.container.innerHTML;
-						expect(html).toBe('<div></div>');
+						expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
+							'<div></div>'
+						);
 						done();
 					})
 					.catch(done);
@@ -203,6 +209,6 @@ describe('Rendering icon', () => {
 
 		// Should render empty icon
 		const html = component.container.innerHTML;
-		expect(html).toBe('<div></div>');
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
 	});
 });

components/svelte/tests/api/30-changing-props.test.ts

@@ -158,7 +158,7 @@ describe('Rendering icon', () => {
 
 		// Should render empty icon
 		const html = component.container.innerHTML;
-		expect(html).toBe('<div></div>');
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
 
 		// onLoad should not have been called yet
 		expect(onLoadCalled).toBe('');
@@ -259,7 +259,7 @@ describe('Rendering icon', () => {
 
 		// Should render empty icon
 		const html = component.container.innerHTML;
-		expect(html).toBe('<div></div>');
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
 
 		// Fixture callback should have been called
 		expect(typeof triggerSwap).toBe('function');
@@ -363,7 +363,7 @@ describe('Rendering icon', () => {
 
 		// Should render empty icon
 		const html = component.container.innerHTML;
-		expect(html).toBe('<div></div>');
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
 
 		// onLoad should not have been called yet
 		expect(onLoadCalled).toBe(false);

components/svelte/tests/iconify/10-basic.test.ts

@@ -25,7 +25,7 @@ describe('Creating component', () => {
 		const html = (node.parentNode as HTMLDivElement).innerHTML;
 
 		// Check HTML
-		expect(html).toBe(
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
 			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 

components/svelte/tests/iconify/10-empty.test.ts

@@ -10,6 +10,6 @@ describe('Empty icon', () => {
 		const html = component.container.innerHTML;
 
 		// Empty container div
-		expect(html).toBe('<div></div>');
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
 	});
 });

components/svelte/tests/offline/10-basic.test.ts

@@ -19,7 +19,7 @@ describe('Creating component', () => {
 		const html = (node.parentNode as HTMLDivElement).innerHTML;
 
 		// Check HTML
-		expect(html).toBe(
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
 			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 

components/svelte/vitest.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+	plugins: [svelte()],
+	test: {
+		globals: true,
+		watch: false,
+		include: ['**/tests/**/*.test.ts'],
+	},
+});