diff --git a/package.json b/package.json
index 6f7e2182..acc8e713 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0-alpha.20",
 		"vite": "^5.0.3",
-		"vitest": "^1.2.0"
+		"vitest": "^1.6.0"
 	},
 	"type": "module"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 79cf03ce..b1c4f817 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -102,7 +102,7 @@ devDependencies:
     specifier: ^5.0.3
     version: 5.3.2
   vitest:
-    specifier: ^1.2.0
+    specifier: ^1.6.0
     version: 1.6.0(jsdom@24.1.0)
 
 packages:
diff --git a/src/lib/components/basics.svelte b/src/lib/components/basics.svelte
index f190a0e6..31a28bd6 100644
--- a/src/lib/components/basics.svelte
+++ b/src/lib/components/basics.svelte
@@ -32,7 +32,7 @@
 <div class="mb-10 print:mb-4">
 	<span
 		class="divider before:bg-primary after:bg-primary print:hidden"
-	/>
+	></span>
 
 	<div class="mb-5 print:mb-1">
 		<h2
diff --git a/src/lib/components/basics.test.ts b/src/lib/components/basics.test.ts
index 72712786..e3ad8471 100644
--- a/src/lib/components/basics.test.ts
+++ b/src/lib/components/basics.test.ts
@@ -1,16 +1,25 @@
-import { cleanup, render } from '@testing-library/svelte/svelte5';
-import { afterEach, describe, expect, it } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import Basics from './basics.svelte';
 
+// Mock $props
+vi.mock('svelte', async () => {
+	const actual = await vi.importActual('svelte');
+	return {
+		...actual,
+		$props: vi.fn(),
+	};
+});
+
 describe('Basics', () => {
 	// Define default props
 	const defaultProps = {
 		name: 'John Doe',
 		label: 'Software Developer',
-		email: 'default-email@example.com',
-		phone: 'default-phone-number',
-		website: 'default-website.com',
-		imgSrc: 'default-path/to/image.jpg',
+		email: 'john@example.com',
+		phone: '+1234567890',
+		website: 'example.com',
+		imgSrc: 'path/to/image.jpg',
 	};
 
 	afterEach(() => {
@@ -18,43 +27,23 @@ describe('Basics', () => {
 	});
 
 	it('should render the name and label', () => {
-		const { getByText } = render(Basics, { ...defaultProps });
+		render(Basics, { props: defaultProps });
 
-		const name = getByText('John Doe');
-		expect(name).not.toBeNull();
-
-		const label = getByText('Software Developer');
-		expect(label).not.toBeNull();
+		expect(screen.getByText('John Doe')).toBeTruthy();
+		expect(screen.getByText('Software Developer')).toBeTruthy();
 	});
 
 	it('should render the avatar if imgSrc is provided', () => {
-		const { getByAltText } = render(Basics, {
-			...defaultProps,
-			imgSrc: 'path/to/image.jpg',
-		});
+		render(Basics, { props: defaultProps });
 
-		const avatar = getByAltText('John Doe');
-		expect(avatar).not.toBeNull();
+		expect(screen.getByAltText('John Doe')).toBeTruthy();
 	});
 
 	it('should render email, phone, and website details', () => {
-		const { getByText } = render(Basics, {
-			...defaultProps,
-			email: 'john@example.com',
-			phone: '+1234567890',
-			website: 'example.com',
-		});
-
-		// Check email
-		const email = getByText('john@example.com');
-		expect(email).not.toBeNull();
-
-		// Check phone
-		const phone = getByText('+1234567890');
-		expect(phone).not.toBeNull();
-
-		// Check website
-		const website = getByText('example.com');
-		expect(website).not.toBeNull();
+		render(Basics, { props: defaultProps });
+
+		expect(screen.getByText('john@example.com')).toBeTruthy();
+		expect(screen.getByText('+1234567890')).toBeTruthy();
+		expect(screen.getByText('example.com')).toBeTruthy();
 	});
 });
diff --git a/vite.config.ts b/vite.config.ts
index d670bc72..152b00e8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { svelteTesting } from '@testing-library/svelte/vite';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [sveltekit(), svelteTesting()],
 	test: {
 		environment: 'jsdom',
 		include: ['src/**/*.{test,spec}.{js,ts}'],