refactor: ♻️ update testing

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"
 }

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

src/lib/components/basics.test.ts

@@ -1,60 +1,49 @@
-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(() => {
 		cleanup();
 	});
 
 	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: '[email protected]',
-			phone: '+1234567890',
-			website: 'example.com',
-		});
-
-		// Check email
-		const email = getByText('[email protected]');
-		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('[email protected]')).toBeTruthy();
+		expect(screen.getByText('+1234567890')).toBeTruthy();
+		expect(screen.getByText('example.com')).toBeTruthy();
 	});
 });

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}'],