test: update test to not use createRawSnippet, use test component instead

tests/unit/components/layout/Card.test.ts

@@ -1,19 +1,11 @@
 import { render, screen } from "@testing-library/svelte";
 import { describe, expect, it } from "vitest";
-import { createRawSnippet } from "svelte";
+import CardTest from "./CardTest.svelte";
-import Card from "$components/layout/Card.svelte";
 
 describe("Card.svelte", () => {
   it("should render without crashing", () => {
-    const childrenSnippet = createRawSnippet(() => ({
+    render(CardTest);
-      render: () => "<div>Test content</div>",
+    const card = document.querySelector(".card");
-    }));
+    expect(card).toBeInTheDocument();
-
-    render(Card, {
-      props: {
-        title: "Test Title",
-        children: childrenSnippet,
-      },
-    });
   });
 });

tests/unit/components/layout/CardTest.svelte

@@ -0,0 +1,8 @@
+<!-- CardTest.svelte -->
+<script>
+  import Card from "$components/layout/Card.svelte";
+</script>
+
+<Card title="Test Title">
+  <div data-testid="card-content">Test content</div>
+</Card>

tests/unit/routes/LayoutTest.svelte

@@ -0,0 +1,8 @@
+<!-- LayoutTest.svelte -->
+<script>
+  import Layout from "$routes/+layout.svelte";
+</script>
+
+<Layout>
+  <span data-testid="test-child">Hello</span>
+</Layout>

tests/unit/routes/PageTest.svelte

@@ -0,0 +1,6 @@
+<!-- PageTest.svelte -->
+<script>
+  import Page from "$routes/+page.svelte";
+</script>
+
+<Page />

tests/unit/routes/layout.test.ts

@@ -27,24 +27,14 @@ describe("+layout.svelte", () => {
   });
 });
 
-import Layout from "$routes/+layout.svelte";
+import LayoutTest from "./LayoutTest.svelte";
 import { render, screen } from "@testing-library/svelte";
-import { createRawSnippet } from "svelte";
 
 describe("Layout Component Coverage", () => {
   it("should render children snippet and initialize props", () => {
-    const testId = "test-child";
+    render(LayoutTest);
-    const childrenSnippet = createRawSnippet(() => ({
-      render: () => `<span data-testid="${testId}">Hello</span>`,
-    }));
 
-    render(Layout, {
+    expect(screen.getByTestId("test-child")).toBeInTheDocument();
-      props: {
-        children: childrenSnippet,
-      },
-    });
-
-    expect(screen.getByTestId(testId)).toBeInTheDocument();
     expect(screen.getByRole("banner")).toBeInTheDocument();
   });
 });

tests/unit/routes/page.test.ts

@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import PageTest from "./PageTest.svelte";
+
+describe("+page.svelte", () => {
+  it("should render without crashing", () => {
+    render(PageTest);
+    const mainGrid = document.querySelector(".main-grid");
+    expect(mainGrid).toBeInTheDocument();
+  });
+});