chore: fix unit tests for svelte component

components/react/tests/offline/10-basic.test.tsx

@@ -12,6 +12,9 @@ const iconData = {
 describe('Creating component', () => {
 	test('basic icon', () => {
 		const renderResult = render(<Icon icon={iconData} />);
+		expect(renderResult.container.innerHTML).toEqual(
+			'<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>'
+		);
 	});
 
 	test('inline icon', () => {

components/react/tests/offline/20-attributes.test.tsx

@@ -57,7 +57,7 @@ describe('Passing attributes', () => {
 			<Icon icon={iconData} color="red" style={{ color: 'green' }} />
 		);
 
-		// `style` overrides `color`
+		// In React component, `style` overrides `color`
 		expect(renderResult.container.innerHTML).toContain(
 			'style="color: green;"'
 		);

components/svelte/api-extractor.json

@@ -7,6 +7,7 @@
 		"@iconify/api-redundancy"
 	],
 	"compiler": {
+		"tsconfigFilePath": "<projectFolder>/tsconfig.src.json",
 		"skipLibCheck": true
 	},
 	"apiReport": {

components/svelte/package.json

@@ -44,7 +44,7 @@
 		"cleanup": "rimraf lib dist",
 		"prebuild": "pnpm run cleanup",
 		"build": "node build",
-		"build:tsc": "tsc -b",
+		"build:tsc": "tsc -b tsconfig.src.json",
 		"build:bundles": "rollup -c rollup.config.js",
 		"build:api": "node build --only-api",
 		"test": "vitest"
@@ -55,21 +55,21 @@
 	"devDependencies": {
 		"@iconify/core": "workspace:^",
 		"@iconify/utils": "workspace:^",
-		"@microsoft/api-extractor": "^7.47.2",
+		"@microsoft/api-extractor": "^7.47.3",
 		"@rollup/plugin-node-resolve": "^15.2.3",
 		"@rollup/plugin-typescript": "^11.1.6",
 		"@sveltejs/vite-plugin-svelte": "^2.5.3",
-		"@testing-library/jest-dom": "^6.4.6",
-		"@testing-library/svelte": "^4.2.3",
+		"@testing-library/jest-dom": "^6.4.8",
+		"@testing-library/svelte": "5.2.0-next.3",
 		"@tsconfig/svelte": "^5.0.4",
 		"@types/jest": "^29.5.12",
-		"@types/node": "^20.14.11",
+		"@types/node": "^20.14.12",
 		"rimraf": "^6.0.1",
-		"rollup": "^4.18.1",
+		"rollup": "^4.19.0",
 		"rollup-plugin-svelte": "^7.2.2",
-		"svelte": "5.0.0-next.123",
+		"svelte": "5.0.0-next.199",
 		"svelte-preprocess": "^5.1.4",
-		"vitest": "^2.0.3"
+		"vitest": "^2.0.4"
 	},
 	"peerDependencies": {
 		"svelte": ">4.0.0"

components/svelte/rollup.config.js

@@ -28,7 +28,12 @@ export default [
 				format: 'cjs',
 			},
 		],
-		plugins: [resolve(resolveParams), typescript()],
+		plugins: [
+			resolve(resolveParams),
+			typescript({
+				tsconfig: 'tsconfig.src.json',
+			}),
+		],
 	},
 	// Files included in OfflineIcon.svelte as bundle
 	{
@@ -43,6 +48,11 @@ export default [
 				format: 'cjs',
 			},
 		],
-		plugins: [resolve(resolveParams), typescript()],
+		plugins: [
+			resolve(resolveParams),
+			typescript({
+				tsconfig: 'tsconfig.src.json',
+			}),
+		],
 	},
 ];

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

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../';
 
@@ -13,8 +11,8 @@ const iconData = {
 describe('Creating component', () => {
 	test('basic icon', () => {
 		const component = render(Icon, {
-			icon: iconData,
-			onLoad: () => {
+			'icon': iconData,
+			'on:load': () => {
 				// Should be called only for icons loaded from API
 				throw new Error('onLoad called for object!');
 			},

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

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../';
 
@@ -10,6 +8,6 @@ describe('Empty icon', () => {
 		const html = component.container.innerHTML;
 
 		// Empty container div
-		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('');
 	});
 });

components/svelte/tests/iconify/10-style-mode.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../..';
 
@@ -13,9 +11,9 @@ const iconData = {
 describe('Rendering as span', () => {
 	test('basic icon', () => {
 		const component = render(Icon, {
-			icon: iconData,
-			mode: 'style',
-			onLoad: () => {
+			'icon': iconData,
+			'mode': 'style',
+			'on:load': () => {
 				// Should be called only for icons loaded from API
 				throw new Error('onLoad called for object!');
 			},
@@ -35,11 +33,11 @@ describe('Rendering as span', () => {
 
 	test('custom dimensions', () => {
 		const component = render(Icon, {
-			icon: iconData,
-			mode: 'style',
-			width: '48',
-			height: 32,
-			onLoad: () => {
+			'icon': iconData,
+			'mode': 'style',
+			'width': '48',
+			'height': 32,
+			'on:load': () => {
 				// Should be called only for icons loaded from API
 				throw new Error('onLoad called for object!');
 			},

components/svelte/tests/iconify/20-attributes.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../';
 
@@ -12,7 +10,11 @@ const iconData = {
 
 describe('Padding attributes', () => {
 	test('title', () => {
-		const component = render(Icon, { icon: iconData, title: 'Icon!' });
+		const component = render(Icon, {
+			icon: iconData,
+			// @ts-expect-error
+			title: 'Icon!',
+		});
 		const node = component.container.querySelector('svg')!;
 		expect(node.getAttribute('title')).toBe('Icon!');
 	});
@@ -31,6 +33,7 @@ describe('Padding attributes', () => {
 		// camelCase, boolean value
 		const component = render(Icon, {
 			icon: iconData,
+			// @ts-expect-error
 			ariaHidden: false,
 		});
 		const node = component.container.querySelector('svg')!;

components/svelte/tests/iconify/20-dimensions.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../';
 

components/svelte/tests/iconify/20-ids.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../';
 

components/svelte/tests/iconify/20-inline.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../';
 
@@ -20,7 +18,11 @@ describe('Inline attribute', () => {
 	});
 
 	test('string true', () => {
-		const component = render(Icon, { icon: iconData, inline: 'true' });
+		const component = render(Icon, {
+			icon: iconData,
+			// @ts-expect-error
+			inline: 'true',
+		});
 		const node = component.container.querySelector('svg')!;
 		const style = node.style;
 
@@ -37,7 +39,11 @@ describe('Inline attribute', () => {
 
 	test('false string', () => {
 		// "false" should be ignored
-		const component = render(Icon, { icon: iconData, inline: 'false' });
+		const component = render(Icon, {
+			icon: iconData,
+			// @ts-expect-error
+			inline: 'false',
+		});
 		const node = component.container.querySelector('svg')!;
 		const style = node.style;
 

components/svelte/tests/iconify/20-transformations.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../';
 
@@ -22,7 +20,11 @@ describe('Rotation', () => {
 	});
 
 	test('string', () => {
-		const component = render(Icon, { icon: iconData, rotate: '180deg' });
+		const component = render(Icon, {
+			icon: iconData,
+			// @ts-expect-error
+			rotate: '180deg',
+		});
 		const node = component.container.querySelector('svg')!;
 
 		// Find first child node
@@ -75,6 +77,7 @@ describe('Flip', () => {
 	test('string for boolean attribute', () => {
 		const component = render(Icon, {
 			icon: iconData,
+			// @ts-expect-error
 			hFlip: 'true',
 		});
 		const node = component.container.querySelector('svg')!;
@@ -121,6 +124,7 @@ describe('Flip', () => {
 	test('wrong case', () => {
 		const component = render(Icon, {
 			icon: iconData,
+			// @ts-expect-error
 			vflip: true,
 		});
 		const node = component.container.querySelector('svg')!;

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

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 
 // Test importing from exports
@@ -14,21 +12,11 @@ const iconData = {
 
 describe('Creating component', () => {
 	test('basic icon', () => {
-		const component = render(Icon, { icon: iconData });
-		const node = component.container.querySelector('svg')!;
-		const html = (node.parentNode as HTMLDivElement).innerHTML;
-
-		// Check HTML
-		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
+		const renderResult = render(Icon, { icon: iconData });
+		expect(
+			renderResult.container.innerHTML.replace(/<!--(.*?)-->/gm, '')
+		).toEqual(
 			'<svg xmlns="http://www.w3.org/2000/svg" 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>'
 		);
-
-		// Make sure getAttribute() works, used in other tests
-		expect(node.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
-		expect(node.getAttribute('aria-hidden')).toBe('true');
-
-		// Make sure style exists
-		const style = node.style;
-		expect(typeof style).toBe('object');
 	});
 });

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

@@ -1,15 +1,12 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../offline';
 
 describe('Empty icon', () => {
 	test('basic test', () => {
-		const component = render(Icon, {});
-		const html = component.container.innerHTML;
-
-		// Empty container div
-		expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe('<div></div>');
+		const renderResult = render(Icon, {});
+		expect(
+			renderResult.container.innerHTML.replace(/<!--(.*?)-->/gm, '')
+		).toEqual('');
 	});
 });

components/svelte/tests/offline/20-attributes.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../offline';
 
@@ -12,66 +10,76 @@ const iconData = {
 
 describe('Padding attributes', () => {
 	test('title', () => {
-		const component = render(Icon, { icon: iconData, title: 'Icon!' });
-		const node = component.container.querySelector('svg')!;
-		expect(node.getAttribute('title')).toBe('Icon!');
+		const renderResult = render(Icon, {
+			icon: iconData,
+			// @ts-expect-error
+			title: 'Icon!',
+		});
+		expect(renderResult.container.innerHTML).toContain('title="Icon!"');
 	});
 
 	test('aria-hidden', () => {
 		// dashes, string value
-		const component = render(Icon, {
+		const renderResult = render(Icon, {
 			'icon': iconData,
 			'aria-hidden': 'false',
 		});
-		const node = component.container.querySelector('svg')!;
-		expect(node.getAttribute('aria-hidden')).toBeNull();
+		expect(renderResult.container.innerHTML).not.toContain('aria-hidden');
 	});
 
 	test('ariaHidden', () => {
 		// camelCase, boolean value
-		const component = render(Icon, {
+		const renderResult = render(Icon, {
 			icon: iconData,
+			// @ts-expect-error
 			ariaHidden: false,
 		});
-		const node = component.container.querySelector('svg')!;
-		expect(node.getAttribute('aria-hidden')).toBeNull();
+		expect(renderResult.container.innerHTML).not.toContain('aria-hidden');
 	});
 
 	test('style', () => {
-		const component = render(Icon, {
+		const renderResult = render(Icon, {
 			icon: iconData,
 			style: 'vertical-align: 0; color: red;',
 		});
-		const node = component.container.querySelector('svg')!;
-		expect(node.style.verticalAlign).toBe('0');
-		expect(node.style.color).toBe('red');
+		expect(renderResult.container.innerHTML).toContain(
+			'style="vertical-align: 0; color: red;"'
+		);
 	});
 
 	test('color', () => {
-		const component = render(Icon, {
+		const renderResult = render(Icon, {
 			icon: iconData,
 			color: 'red',
 		});
-		const node = component.container.querySelector('svg')!;
-		expect(node.style.color).toBe('red');
+		expect(renderResult.container.innerHTML).toContain(
+			'style="color: red;"'
+		);
 	});
 
 	test('color with style', () => {
-		const component = render(Icon, {
+		const renderResult = render(Icon, {
 			icon: iconData,
 			color: 'red',
 			style: 'color: green;',
 		});
-		const node = component.container.querySelector('svg')!;
-		expect(node.style.color).toBe('red');
+
+		// In Svelte component, `color` overrides `style`
+		expect(renderResult.container.innerHTML).toContain(
+			'style="color: red;"'
+		);
+		expect(renderResult.container.innerHTML).not.toContain('green');
 	});
 
 	test('attributes that cannot change', () => {
-		const component = render(Icon, {
+		const renderResult = render(Icon, {
 			icon: iconData,
 			viewBox: '0 0 0 0',
 		});
-		const node = component.container.querySelector('svg')!;
-		expect(node.getAttribute('viewBox')).toBe('0 0 24 24');
+
+		expect(renderResult.container.innerHTML).toContain(
+			'viewBox="0 0 24 24"'
+		);
+		expect(renderResult.container.innerHTML).not.toContain('0 0 0 0');
 	});
 });

components/svelte/tests/offline/20-dimensions.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../offline';
 

components/svelte/tests/offline/20-ids.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../offline';
 

components/svelte/tests/offline/20-inline.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../offline';
 
@@ -20,7 +18,11 @@ describe('Inline attribute', () => {
 	});
 
 	test('string true', () => {
-		const component = render(Icon, { icon: iconData, inline: 'true' });
+		const component = render(Icon, {
+			icon: iconData,
+			// @ts-expect-error
+			inline: 'true',
+		});
 		const node = component.container.querySelector('svg')!;
 		const style = node.style;
 
@@ -37,7 +39,11 @@ describe('Inline attribute', () => {
 
 	test('false string', () => {
 		// "false" should be ignored
-		const component = render(Icon, { icon: iconData, inline: 'false' });
+		const component = render(Icon, {
+			icon: iconData,
+			// @ts-expect-error
+			inline: 'false',
+		});
 		const node = component.container.querySelector('svg')!;
 		const style = node.style;
 

components/svelte/tests/offline/20-storage.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon, { addIcon, addCollection } from '../../offline';
 
@@ -18,7 +16,7 @@ describe('Using storage', () => {
 		const node = component.container.querySelector('svg')!;
 		const html = (node.parentNode as HTMLDivElement).innerHTML;
 
-		expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe(
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
 			'<svg xmlns="http://www.w3.org/2000/svg" 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>'
 		);
 	});
@@ -44,7 +42,7 @@ describe('Using storage', () => {
 		const node = component.container.querySelector('svg')!;
 		const html = (node.parentNode as HTMLDivElement).innerHTML;
 
-		expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe(
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
 			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
 		);
 	});
@@ -70,7 +68,7 @@ describe('Using storage', () => {
 		const node = component.container.querySelector('svg')!;
 		const html = (node.parentNode as HTMLDivElement).innerHTML;
 
-		expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe(
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
 			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
 		);
 	});
@@ -82,6 +80,6 @@ describe('Using storage', () => {
 		const html = component.container.innerHTML;
 
 		// Empty container div
-		expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe('<div></div>');
+		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('');
 	});
 });

components/svelte/tests/offline/20-transformations.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/svelte';
 import Icon from '../../offline';
 
@@ -22,7 +20,11 @@ describe('Rotation', () => {
 	});
 
 	test('string', () => {
-		const component = render(Icon, { icon: iconData, rotate: '180deg' });
+		const component = render(Icon, {
+			icon: iconData,
+			// @ts-expect-error
+			rotate: '180deg',
+		});
 		const node = component.container.querySelector('svg')!;
 
 		// Find first child node
@@ -75,6 +77,7 @@ describe('Flip', () => {
 	test('string for boolean attribute', () => {
 		const component = render(Icon, {
 			icon: iconData,
+			// @ts-expect-error
 			hFlip: 'true',
 		});
 		const node = component.container.querySelector('svg')!;
@@ -121,6 +124,7 @@ describe('Flip', () => {
 	test('wrong case', () => {
 		const component = render(Icon, {
 			icon: iconData,
+			// @ts-expect-error
 			vflip: true,
 		});
 		const node = component.container.querySelector('svg')!;

components/svelte/tests/tsconfig.json

@@ -1,9 +0,0 @@
-{
-	"extends": "../tsconfig-base.json",
-	"compilerOptions": {
-		"types": ["node", "jest"],
-		"rootDir": ".",
-		"outDir": "../lib",
-		"module": "CommonJS"
-	}
-}

components/svelte/tsconfig.json

@@ -1,9 +1,11 @@
 {
-	"extends": "./tsconfig-base.json",
-	"include": ["src/**/*.ts", ".eslintrc.js"],
-	"exclude": ["src/svelte.d.ts"],
-	"compilerOptions": {
-		"rootDir": "./src",
-		"outDir": "./lib"
-	}
+	"files": [],
+	"references": [
+		{
+			"path": "./tsconfig.src.json"
+		},
+		{
+			"path": "./tsconfig.tests.json"
+		}
+	]
 }

components/svelte/tsconfig.src.json

@@ -1,4 +1,6 @@
 {
+	"include": ["src/**/*.ts", ".eslintrc.js"],
+	"exclude": ["src/svelte.d.ts"],
 	"compilerOptions": {
 		"rootDir": "./src",
 		"outDir": "./lib",

components/svelte/tsconfig.tests.json

@@ -0,0 +1,18 @@
+{
+	"include": ["tests/**/*", "tests/**/*.svelte"],
+	"exclude": ["src/*", ".eslintrc.js"],
+	"compilerOptions": {
+		"rootDir": "./tests",
+		"target": "esnext",
+		"module": "esnext",
+		"declaration": true,
+		"sourceMap": false,
+		"strict": true,
+		"types": ["node", "svelte"],
+		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"noEmit": true
+	}
+}

components/svelte/vitest.config.js

@@ -1,11 +1,15 @@
 import { defineConfig } from 'vitest/config';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
 	plugins: [svelte()],
 	test: {
 		globals: true,
 		watch: false,
+		environment: 'jsdom',
 		include: ['**/tests/**/*.test.ts'],
 	},
-});
+	resolve: {
+		conditions: mode === 'test' ? ['browser'] : [],
+	},
+}));