use browser mode

Hugos68 · Hugos68 · commit 0a98ac3fbfb6 · 2025-11-21T14:20:54.000+01:00
diff --git a/packages/skeleton-react/package.json b/packages/skeleton-react/package.json
@@ -65,12 +65,14 @@
 		"@types/react": "catalog:",
 		"@types/react-dom": "catalog:",
 		"@vitejs/plugin-react": "catalog:",
+		"@vitest/browser-playwright": "catalog:",
 		"jsdom": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
 		"tsdown": "catalog:",
 		"typescript": "catalog:",
-		"vite": "catalog:"
+		"vite": "catalog:",
+		"vitest-browser-react": "catalog:"
 	},
 	"license": "MIT",
 	"type": "module"
diff --git a/packages/skeleton-react/vite.config.ts b/packages/skeleton-react/vite.config.ts
@@ -1,11 +1,14 @@
 import react from '@vitejs/plugin-react';
+import { playwright } from '@vitest/browser-playwright';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-	plugins: [react() as unknown as any],
+	plugins: [react()],
 	test: {
-		setupFiles: './test/setup.ts',
-		globals: true,
-		environment: 'jsdom',
+		browser: {
+			enabled: true,
+			provider: playwright(),
+			instances: [{ browser: 'chromium' }],
+		},
 	},
 });
diff --git a/packages/skeleton-svelte/package.json b/packages/skeleton-svelte/package.json
@@ -13,7 +13,8 @@
 		"build": "svelte-package --input src --output dist --preserve-output",
 		"test": "vitest run",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"sync": "svelte-kit sync && pnpm build"
+		"sync": "svelte-kit sync && pnpm build",
+		"test:browser": "vitest --config=vitest.browser.config.ts"
 	},
 	"exports": {
 		".": {
@@ -64,13 +65,12 @@
 		"@sveltejs/kit": "catalog:",
 		"@sveltejs/package": "catalog:",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
-		"@testing-library/jest-dom": "catalog:",
-		"@testing-library/svelte": "catalog:",
-		"jsdom": "catalog:",
+		"@vitest/browser-playwright": "catalog:",
 		"svelte": "catalog:",
 		"svelte-check": "catalog:",
 		"typescript": "catalog:",
-		"vite": "catalog:"
+		"vite": "catalog:",
+		"vitest-browser-svelte": "catalog:"
 	},
 	"license": "MIT",
 	"type": "module"
diff --git a/packages/skeleton-svelte/test/components/accordion/index.test.ts b/packages/skeleton-svelte/test/components/accordion/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
 
 describe('Accordion', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/app-bar/index.test.ts b/packages/skeleton-svelte/test/components/app-bar/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('AppBar', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/avatar/index.test.ts b/packages/skeleton-svelte/test/components/avatar/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Avatar', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/collapsible/index.test.ts b/packages/skeleton-svelte/test/components/collapsible/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Collapsible', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/combobox/index.test.ts b/packages/skeleton-svelte/test/components/combobox/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Combobox', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/date-picker/index.test.ts b/packages/skeleton-svelte/test/components/date-picker/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('DatePicker', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/dialog/index.test.ts b/packages/skeleton-svelte/test/components/dialog/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Dialog', () => {
 	describe('Trigger', () => {
diff --git a/packages/skeleton-svelte/test/components/file-upload/index.test.ts b/packages/skeleton-svelte/test/components/file-upload/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('FileUpload', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/listbox/index.test.ts b/packages/skeleton-svelte/test/components/listbox/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Listbox', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/menu/index.test.ts b/packages/skeleton-svelte/test/components/menu/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Menu', () => {
 	describe('Trigger', () => {
diff --git a/packages/skeleton-svelte/test/components/navigation/index.test.ts b/packages/skeleton-svelte/test/components/navigation/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Navigation', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/pagination/index.test.ts b/packages/skeleton-svelte/test/components/pagination/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Pagination', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/popover/index.test.ts b/packages/skeleton-svelte/test/components/popover/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Popover', () => {
 	describe('Trigger', () => {
diff --git a/packages/skeleton-svelte/test/components/portal/index.test.ts b/packages/skeleton-svelte/test/components/portal/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Portal', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/progress/index.test.ts b/packages/skeleton-svelte/test/components/progress/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Progress', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/rating-group/index.test.ts b/packages/skeleton-svelte/test/components/rating-group/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('RatingGroup', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/segmented-control/index.test.ts b/packages/skeleton-svelte/test/components/segmented-control/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('SegmentedControl', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/slider/index.test.tsx b/packages/skeleton-svelte/test/components/slider/index.test.tsx
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Slider', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/switch/index.test.ts b/packages/skeleton-svelte/test/components/switch/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Switch', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/tabs/index.test.ts b/packages/skeleton-svelte/test/components/tabs/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Tabs', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/tags-input/index.test.tsx b/packages/skeleton-svelte/test/components/tags-input/index.test.tsx
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('TagsInput', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/toast/index.test.ts b/packages/skeleton-svelte/test/components/toast/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen, waitFor } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen, waitFor } from 'vitest-browser-svelte';
 
 describe('Toast', () => {
 	describe('Group', () => {
diff --git a/packages/skeleton-svelte/test/components/toggle-group/index.test.ts b/packages/skeleton-svelte/test/components/toggle-group/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('ToggleGroup', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/components/tooltip/index.test.ts b/packages/skeleton-svelte/test/components/tooltip/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('Tooltip', () => {
 	describe('Trigger', () => {
diff --git a/packages/skeleton-svelte/test/components/tree-view/index.test.ts b/packages/skeleton-svelte/test/components/tree-view/index.test.ts
@@ -1,6 +1,6 @@
 import Test from './test.svelte';
-import { render, screen } from '@testing-library/svelte';
 import { describe, expect, it } from 'vitest';
+import { render, screen } from 'vitest-browser-svelte';
 
 describe('TreeView', () => {
 	describe('Root', () => {
diff --git a/packages/skeleton-svelte/test/setup.ts b/packages/skeleton-svelte/test/setup.ts
diff --git a/packages/skeleton-svelte/vite.config.ts b/packages/skeleton-svelte/vite.config.ts
@@ -1,12 +1,14 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import { svelteTesting } from '@testing-library/svelte/vite';
+import { playwright } from '@vitest/browser-playwright';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-	logLevel: 'error',
-	plugins: [svelte(), svelteTesting()],
+	plugins: [svelte()],
 	test: {
-		environment: 'jsdom',
-		setupFiles: './test/setup.ts',
+		browser: {
+			enabled: true,
+			provider: playwright(),
+			instances: [{ browser: 'chromium' }],
+		},
 	},
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
