Use vitest in Vue tests, publish update for Vue component

demo/vue-demo/src/App.vue

@@ -22,7 +22,9 @@
 
 		<InlineDemo />
 
-		<LoadingDemo />
+		<LoadingTest />
+		<StyleTest />
+		<InlineTest />
 	</div>
 </template>
 
@@ -45,7 +47,9 @@ import OfflineUsageDemo from './demo-components/UsageOffline.vue';
 import FullOfflineUsageDemo from './demo-components/UsageFullOffline.vue';
 import FullUsageDemo from './demo-components/UsageFull.vue';
 
-import LoadingDemo from './test-components/LoadingDemo.vue';
+import LoadingTest from './test-components/LoadingDemo.vue';
+import StyleTest from './test-components/Style.vue';
+import InlineTest from './test-components/Inline.vue';
 
 // Disable cache
 disableCache('all');
@@ -104,7 +108,9 @@ export default {
 		OfflineUsageDemo,
 		FullOfflineUsageDemo,
 		FullUsageDemo,
-		LoadingDemo,
+		LoadingTest,
+		StyleTest,
+		InlineTest,
 	},
 };
 </script>

demo/vue-demo/src/test-components/Alignment.vue

@@ -3,180 +3,150 @@
 		<h1>Alignment (components/Alignment.vue)</h1>
 		<div>
 			<p>Icon with correct width/heigh ratio:</p>
-			<Icon icon="experiment" />
+			<Icon icon="demo" />
 		</div>
 		<div>
 			<p>Bad width/height ratio, default alignment (slice = false):</p>
-			<Icon icon="experiment" width="2em" height="1em" />
+			<Icon icon="demo" width="2em" height="1em" />
-			<Icon icon="experiment" width="1em" height="2em" />
+			<Icon icon="demo" width="1em" height="2em" />
 		</div>
 		<div>
 			<p>Slice:</p>
-			<Icon icon="experiment" width="2em" height="1em" :slice="true" />
+			<Icon icon="demo" width="2em" height="1em" :slice="true" />
-			<Icon icon="experiment" width="2em" height="1em" align="slice" />
+			<Icon icon="demo" width="2em" height="1em" align="slice" />
 		</div>
 		<div>
 			<p>Slice:</p>
-			<Icon icon="experiment" width="1em" height="2em" :slice="true" />
+			<Icon icon="demo" width="1em" height="2em" :slice="true" />
-			<Icon icon="experiment" width="1em" height="2em" align="slice" />
+			<Icon icon="demo" width="1em" height="2em" align="slice" />
 		</div>
 		<div>
 			<p>Left:</p>
-			<Icon icon="experiment" width="2em" height="1em" hAlign="left" />
+			<Icon icon="demo" width="2em" height="1em" hAlign="left" />
-			<Icon icon="experiment" width="2em" height="1em" h-align="left" />
+			<Icon icon="demo" width="2em" height="1em" h-align="left" />
+			<Icon icon="demo" width="2em" height="1em" horizontalAlign="left" />
 			<Icon
-				icon="experiment"
+				icon="demo"
-				width="2em"
-				height="1em"
-				horizontalAlign="left"
-			/>
-			<Icon
-				icon="experiment"
 				width="2em"
 				height="1em"
 				horizontal-align="left"
 			/>
-			<Icon icon="experiment" width="2em" height="1em" align="left" />
+			<Icon icon="demo" width="2em" height="1em" align="left" />
 		</div>
 		<div>
 			<p>Left with slice:</p>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				hAlign="left"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				h-align="left"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				horizontalAlign="left"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				horizontal-align="left"
 				:slice="true"
 			/>
-			<Icon
+			<Icon icon="demo" width="1em" height="2em" align="left,slice" />
-				icon="experiment"
-				width="1em"
-				height="2em"
-				align="left,slice"
-			/>
 		</div>
 		<div>
 			<p>Right:</p>
-			<Icon icon="experiment" width="2em" height="1em" hAlign="right" />
+			<Icon icon="demo" width="2em" height="1em" hAlign="right" />
-			<Icon icon="experiment" width="2em" height="1em" h-align="right" />
+			<Icon icon="demo" width="2em" height="1em" h-align="right" />
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				horizontalAlign="right"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				horizontal-align="right"
 			/>
-			<Icon icon="experiment" width="2em" height="1em" align="right" />
+			<Icon icon="demo" width="2em" height="1em" align="right" />
 		</div>
 		<div>
 			<p>Right with slice:</p>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				hAlign="right"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				h-align="right"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				horizontalAlign="right"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				horizontal-align="right"
 				:slice="true"
 			/>
-			<Icon
+			<Icon icon="demo" width="1em" height="2em" align="right,slice" />
-				icon="experiment"
-				width="1em"
-				height="2em"
-				align="right,slice"
-			/>
 		</div>
 		<div>
 			<p>Top:</p>
-			<Icon
+			<Icon icon="demo" width="1em" height="2em" verticalAlign="top" />
-				icon="experiment"
+			<Icon icon="demo" width="1em" height="2em" vertical-align="top" />
-				width="1em"
+			<Icon icon="demo" width="1em" height="2em" v-bind:v-align="'top'" />
-				height="2em"
+			<Icon icon="demo" width="1em" height="2em" align="top" />
-				verticalAlign="top"
-			/>
-			<Icon
-				icon="experiment"
-				width="1em"
-				height="2em"
-				vertical-align="top"
-			/>
-			<Icon
-				icon="experiment"
-				width="1em"
-				height="2em"
-				v-bind:v-align="'top'"
-			/>
-			<Icon icon="experiment" width="1em" height="2em" align="top" />
 		</div>
 		<div>
 			<p>Top with slice:</p>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				verticalAlign="top"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				vertical-align="top"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				v-bind:v-align="'top'"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				align="top"
@@ -185,55 +155,45 @@
 		</div>
 		<div>
 			<p>Bottom:</p>
+			<Icon icon="demo" width="1em" height="2em" verticalAlign="bottom" />
 			<Icon
-				icon="experiment"
+				icon="demo"
-				width="1em"
-				height="2em"
-				verticalAlign="bottom"
-			/>
-			<Icon
-				icon="experiment"
 				width="1em"
 				height="2em"
 				vertical-align="bottom"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="1em"
 				height="2em"
 				v-bind:v-align="'bottom'"
 			/>
-			<Icon icon="experiment" width="1em" height="2em" align="bottom" />
+			<Icon icon="demo" width="1em" height="2em" align="bottom" />
 		</div>
 		<div>
 			<p>Bottom with slice:</p>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				verticalAlign="bottom"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				vertical-align="bottom"
 				:slice="true"
 			/>
 			<Icon
-				icon="experiment"
+				icon="demo"
 				width="2em"
 				height="1em"
 				v-bind:v-align="'bottom'"
 				:slice="true"
 			/>
-			<Icon
+			<Icon icon="demo" width="2em" height="1em" align="bottom,slice" />
-				icon="experiment"
-				width="2em"
-				height="1em"
-				align="bottom,slice"
-			/>
 		</div>
 	</section>
 </template>

demo/vue-demo/src/test-components/Class.vue

@@ -3,17 +3,17 @@
 		<h1>Class (components/Class.vue)</h1>
 		<div>
 			Default icon:
-			<Icon icon="experiment" />
+			<Icon icon="demo" />
 		</div>
 		<div>
 			Red color:
-			<Icon icon="experiment" class="red-color" />
+			<Icon icon="demo" class="red-color" />
-			<Icon icon="experiment" :class="redClass" />
+			<Icon icon="demo" :class="redClass" />
 		</div>
 		<div>
 			Red color and 20px:
-			<Icon icon="experiment" class="red-color big-icon" />
+			<Icon icon="demo" class="red-color big-icon" />
-			<Icon icon="experiment" :class="[redClass, bigIcon]" />
+			<Icon icon="demo" :class="[redClass, bigIcon]" />
 		</div>
 	</section>
 </template>

demo/vue-demo/src/test-components/Style.vue

@@ -3,33 +3,42 @@
 		<h1>Style (components/Style.vue)</h1>
 		<div>
 			Default icon:
-			<Icon icon="experiment" />
+			<Icon icon="demo" />
 		</div>
 		<div>
 			Red color:
-			<Icon icon="experiment" color="red" />
+			<Icon icon="demo" color="red" />
-			<Icon icon="experiment" :style="{ color: 'red' }" />
+			<Icon
-			<Icon icon="experiment" style="color: red" />
+				icon="demo"
-			<Icon icon="experiment" :style="redIcon" />
+				:inline="true"
+				:style="{ color: 'red', verticalAlign: 0 }"
+			/>
+			<Icon
+				icon="demo"
+				:inline="true"
+				style="color: red; vertical-align: 0"
+			/>
+			<Icon icon="demo" :style="redIcon" />
 		</div>
 		<div>
 			40px:
-			<Icon icon="experiment" height="40" />
+			<Icon icon="demo" height="40" />
-			<Icon icon="experiment" :width="40" />
+			<Icon icon="demo" :width="40" />
-			<Icon icon="experiment" :style="{ fontSize: '40px' }" />
+			<Icon
-			<Icon icon="experiment" style="font-size: 40px" />
+				icon="demo"
-			<Icon icon="experiment" :style="bigIcon" />
+				:inline="true"
+				:style="{ fontSize: '40px', verticalAlign: 0 }"
+			/>
+			<Icon icon="demo" style="font-size: 40px" />
+			<Icon icon="demo" :style="bigIcon" />
 		</div>
 		<div>
 			Red and 40px:
-			<Icon icon="experiment" height="40" color="red" />
+			<Icon icon="demo" height="40" color="red" />
-			<Icon icon="experiment" :width="40" :style="redIcon" />
+			<Icon icon="demo" :width="40" :style="redIcon" />
-			<Icon
+			<Icon icon="demo" :style="{ color: 'red', fontSize: '40px' }" />
-				icon="experiment"
+			<Icon icon="demo" style="color: red; font-size: 40px" />
-				:style="{ color: 'red', fontSize: '40px' }"
+			<Icon icon="demo" :style="[bigIcon, redIcon]" />
-			/>
-			<Icon icon="experiment" style="color: red; font-size: 40px" />
-			<Icon icon="experiment" :style="[bigIcon, redIcon]" />
 		</div>
 	</section>
 </template>

demo/vue-demo/src/test-components/Transform.vue

@@ -3,50 +3,46 @@
 		<h1>Transformations (components/Transform.vue)</h1>
 		<div>
 			Default icon:
-			<Icon icon="experiment" />
+			<Icon icon="demo" />
 		</div>
 		<div>
 			Flip horizontally:
-			<Icon icon="experiment" :hFlip="true" />
+			<Icon icon="demo" :hFlip="true" />
-			<Icon icon="experiment" flip="horizontal" />
+			<Icon icon="demo" flip="horizontal" />
-			<Icon icon="experiment" :horizontal-flip="true" />
+			<Icon icon="demo" :horizontal-flip="true" />
-			<Icon icon="experiment" :h-flip="true" />
+			<Icon icon="demo" :h-flip="true" />
 		</div>
 		<div>
 			Flip vertically:
-			<Icon icon="experiment" :vFlip="true" />
+			<Icon icon="demo" :vFlip="true" />
-			<Icon icon="experiment" flip="vertical" />
+			<Icon icon="demo" flip="vertical" />
-			<Icon icon="experiment" :vertical-flip="true" />
+			<Icon icon="demo" :vertical-flip="true" />
-			<Icon icon="experiment" :v-flip="true" />
+			<Icon icon="demo" :v-flip="true" />
 		</div>
 		<div>
 			Flip horizontally and vertically:
-			<Icon icon="experiment" :hFlip="true" :vFlip="true" />
+			<Icon icon="demo" :hFlip="true" :vFlip="true" />
-			<Icon icon="experiment" flip="horizontal,vertical" />
+			<Icon icon="demo" flip="horizontal,vertical" />
-			<Icon
+			<Icon icon="demo" :horizontal-flip="true" :vertical-flip="true" />
-				icon="experiment"
+			<Icon icon="demo" :h-flip="true" :v-flip="true" />
-				:horizontal-flip="true"
-				:vertical-flip="true"
-			/>
-			<Icon icon="experiment" :h-flip="true" :v-flip="true" />
 		</div>
 		<div>
 			90&deg; rotation:
-			<Icon icon="experiment" :rotate="1" />
+			<Icon icon="demo" :rotate="1" />
-			<Icon icon="experiment" rotate="90deg" />
+			<Icon icon="demo" rotate="90deg" />
-			<Icon icon="experiment" rotate="25%" />
+			<Icon icon="demo" rotate="25%" />
 		</div>
 		<div>
 			180&deg; rotation:
-			<Icon icon="experiment" :rotate="2" />
+			<Icon icon="demo" :rotate="2" />
-			<Icon icon="experiment" rotate="180deg" />
+			<Icon icon="demo" rotate="180deg" />
-			<Icon icon="experiment" rotate="50%" />
+			<Icon icon="demo" rotate="50%" />
 		</div>
 		<div>
 			270&deg; rotation:
-			<Icon icon="experiment" :rotate="3" />
+			<Icon icon="demo" :rotate="3" />
-			<Icon icon="experiment" rotate="270deg" />
+			<Icon icon="demo" rotate="270deg" />
-			<Icon icon="experiment" rotate="-25%" />
+			<Icon icon="demo" rotate="-25%" />
 		</div>
 	</section>
 </template>

packages/vue/.npmignore

@@ -1,10 +1,14 @@
 .DS_Store
+.babelrc
+.eslintignore
+.eslintrc.js
 node_modules
 src
 lib
 tests
-api-extractor.json
+api-extractor.*.json
 build.js
 tsconfig.json
+tsconfig.common.json
 *.config.js
-
+vitest.config.ts

packages/vue/build.js

@@ -65,7 +65,7 @@ if (compile.api && !fileExists(packagesDir + '/vue/lib/IconifyIcon.d.ts')) {
 	compile.lib = true;
 }
 
-if (compile.lib && !fileExists(packagesDir + '/core/lib/cache.js')) {
+if (compile.lib && !fileExists(packagesDir + '/core/lib/cache.mjs')) {
 	compile.core = true;
 }
 

packages/vue/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/vue",
 	"description": "Iconify icon component for Vue 3.",
 	"author": "Vjacheslav Trushkin",
-	"version": "3.1.4",
+	"version": "3.2.0",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",
@@ -18,7 +18,7 @@
 		"build:dist": "rollup -c rollup.config.js",
 		"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
 		"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
-		"test": "jest --runInBand"
+		"test": "vitest"
 	},
 	"main": "dist/iconify.js",
 	"module": "dist/iconify.mjs",
@@ -43,16 +43,16 @@
 	},
 	"devDependencies": {
 		"@babel/preset-env": "^7.16.11",
-		"@iconify/core": "^1.2.4",
+		"@iconify/core": "^1.3.0",
 		"@microsoft/api-extractor": "^7.19.4",
 		"@rollup/plugin-node-resolve": "^13.1.3",
-		"@types/jest": "^27.4.0",
+		"@types/jest": "^27.4.1",
-		"@vue/test-utils": "^2.0.0-rc.18",
+		"@vitejs/plugin-vue": "^2.2.4",
-		"@vue/vue3-jest": "^27.0.0-alpha.4",
+		"@vue/test-utils": "^2.0.0-rc.17",
-		"babel-jest": "^27.4.6",
+		"jsdom": "^19.0.0",
-		"jest": "^27.4.7",
 		"rollup": "^2.66.0",
 		"typescript": "^4.5.5",
+		"vitest": "^0.7.6",
 		"vue": "3"
 	},
 	"peerDependencies": {

packages/vue/tests/api/10-api-mock-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { loadIcons, iconExists } from '../../';
 import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
 import { provider, nextPrefix } from './load';

packages/vue/tests/api/20-rendering-from-api-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { Icon, loadIcons, iconExists } from '../../';

packages/vue/tests/api/30-changing-props-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { Icon, iconExists } from '../../';

packages/vue/tests/api/load.ts

@@ -12,4 +12,4 @@ _api.setAPIModule(provider, mockAPIModule);
 
 // Prefix
 let counter = 0;
-export const nextPrefix = () => 'mock-' + counter++;
+export const nextPrefix = () => 'mock-' + (counter++).toString();

packages/vue/tests/empty.ts

@@ -1,3 +1,6 @@
 // Default data for empty icon
 export const defaultIconResult =
 	'<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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"></svg>';
+
+// Empty string: could be '<!---->' (jsdom) or '' (happy-dom), depending on testing envronment
+export const emptyString = '<!---->';

packages/vue/tests/iconify/10-basic-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../';
@@ -26,7 +23,7 @@ describe('Creating component', () => {
 		const wrapper = mount(Wrapper, {});
 		await nextTick();
 
-		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
+		expect(wrapper.html().replace(/\s*\n\s*/g, '')).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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
@@ -43,7 +40,7 @@ describe('Creating component', () => {
 		});
 		await nextTick();
 
-		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
+		expect(wrapper.html().replace(/\s*\n\s*/g, '')).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" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});

packages/vue/tests/iconify/10-empty-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../';
 import { defaultIconResult } from '../empty';

packages/vue/tests/iconify/20-attributes-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../';

packages/vue/tests/iconify/20-dimensions-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../';

packages/vue/tests/iconify/20-ids-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../';

packages/vue/tests/iconify/20-inline-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../';

packages/vue/tests/iconify/20-transformations-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../';

packages/vue/tests/offline/10-basic-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 // Import from file
 import { Icon } from '../../dist/offline';

packages/vue/tests/offline/10-empty-test.ts

@@ -1,9 +1,7 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 // Import from alias
 import { Icon } from '../../offline';
+import { emptyString } from '../empty';
 
 describe('Empty icon', () => {
 	test('basic test', () => {
@@ -11,7 +9,7 @@ describe('Empty icon', () => {
 			props: {},
 		});
 
-		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
+		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(emptyString);
 	});
 
 	test('with child node', () => {

packages/vue/tests/offline/20-attributes-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../offline';
 

packages/vue/tests/offline/20-dimensions-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../offline';
 

packages/vue/tests/offline/20-ids-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../offline';
 

packages/vue/tests/offline/20-inline-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../dist/offline';
 

packages/vue/tests/offline/20-storage-test.ts

@@ -1,8 +1,6 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 import { Icon, addIcon, addCollection } from '../../offline';
+import { emptyString } from '../empty';
 
 const iconData = {
 	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
@@ -93,6 +91,6 @@ describe('Using storage', () => {
 		};
 
 		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
+		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(emptyString);
 	});
 });

packages/vue/tests/offline/20-transformations-test.ts

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import { mount } from '@vue/test-utils';
 import { Icon } from '../../offline';
 

packages/vue/tests/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../tsconfig.common.json",
+	"compilerOptions": {
+		"types": ["node", "jest"],
+		"rootDir": "."
+	}
+}

packages/vue/tsconfig.common.json

@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"declaration": true,
+		"sourceMap": false,
+		"strict": false,
+		"moduleResolution": "node",
+		"esModuleInterop": true,
+		"importsNotUsedAsValues": "error",
+		"forceConsistentCasingInFileNames": true
+	}
+}

packages/vue/tsconfig.json

@@ -1,15 +1,9 @@
 {
+	"extends": "./tsconfig.common.json",
 	"compilerOptions": {
 		"rootDir": "./src",
 		"outDir": "./lib",
-		"target": "ESNext",
+		"lib": ["ESNext", "DOM"]
-		"module": "ESNext",
+	},
-		"declaration": true,
+	"include": ["src/**/*.ts"]
-		"sourceMap": false,
-		"strict": false,
-		"moduleResolution": "node",
-		"esModuleInterop": true,
-		"importsNotUsedAsValues": "error",
-		"forceConsistentCasingInFileNames": true
-	}
 }

packages/vue/vitest.config.ts

@@ -0,0 +1,14 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vitest/config';
+import Vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+	plugins: [Vue()],
+	test: {
+		globals: true,
+		watch: false,
+		include: ['tests/**/*-test.ts'],
+		environment: 'jsdom',
+	},
+});