diff --git a/tests/Tile.test.svelte b/tests/Tile.test.svelte
deleted file mode 100644
index aeec2956..00000000
--- a/tests/Tile.test.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-Content
-
-Content
diff --git a/tests/Tile/Tile.test.svelte b/tests/Tile/Tile.test.svelte
new file mode 100644
index 00000000..91a07708
--- /dev/null
+++ b/tests/Tile/Tile.test.svelte
@@ -0,0 +1,20 @@
+
+
+Default tile
+
+Light variant
+
+ {
+ console.log("clicked");
+ }}
+>
+ Clickable tile
+
+
+
+ Custom attributes
+
diff --git a/tests/Tile/Tile.test.ts b/tests/Tile/Tile.test.ts
new file mode 100644
index 00000000..5e596df7
--- /dev/null
+++ b/tests/Tile/Tile.test.ts
@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import Tile from "./Tile.test.svelte";
+
+describe("Tile", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("should render with default class", () => {
+ render(Tile);
+
+ const tile = screen.getByText("Default tile");
+ expect(tile).toHaveClass("bx--tile");
+ });
+
+ it("should render light variant", () => {
+ render(Tile);
+
+ const lightTile = screen.getByText("Light variant");
+ expect(lightTile).toHaveClass("bx--tile", "bx--tile--light");
+ });
+
+ it("should handle click events", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(Tile);
+
+ const tile = screen.getByTestId("click-test");
+ await user.click(tile);
+ expect(consoleLog).toHaveBeenCalledWith("clicked");
+ expect(consoleLog).toHaveBeenCalledTimes(1);
+ });
+
+ it("should pass through additional attributes", () => {
+ render(Tile);
+
+ const tile = screen.getByTestId("attr-test");
+ expect(tile).toHaveAttribute("title", "Custom title");
+ expect(tile).toHaveClass("custom-class");
+ });
+});