test: resolve alias paths and TypeScript errors in Playwright tests

Use `process.cwd()` for absolute alias resolution to ensure
consistency in CI. Add wrapper components to accept props
via `mount()` for type-safe testing.

Author: metonym

playwright.config.ts

@@ -16,9 +16,9 @@ export default defineConfig({
       plugins: [svelte({ preprocess: vitePreprocess() })],
       resolve: {
         alias: {
-          "svelte-highlight": path.resolve("src"),
-          "svelte-highlight/styles": path.resolve("src/styles"),
-          "svelte-highlight/languages": path.resolve("src/languages"),
+          "svelte-highlight/styles": path.resolve(process.cwd(), "src/styles"),
+          "svelte-highlight/languages": path.resolve(process.cwd(), "src/languages"),
+          "svelte-highlight": path.resolve(process.cwd(), "src"),
         },
         conditions: ["browser", "module", "import"],
       },

tests/e2e/Highlight.withProps.test.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Highlight from "svelte-highlight";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+
+  export let langtag: boolean = false;
+  export let code: string = "";
+  export let language: { name: string; register: () => void };
+  export let style: string = "";
+</script>
+
+<svelte:head>
+  {@html atomOneDark}
+</svelte:head>
+
+<Highlight {langtag} {code} {language} {style} />
+

tests/e2e/HighlightAuto.withProps.test.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { HighlightAuto } from "svelte-highlight";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+
+  export let code: string = "";
+</script>
+
+<svelte:head>
+  {@html atomOneDark}
+</svelte:head>
+
+<HighlightAuto {code} langtag />
+

tests/e2e/e2e.test.ts

@@ -2,6 +2,8 @@ import { expect, test } from "@playwright/experimental-ct-svelte";
 import Highlight from "./Highlight.test.svelte";
 import HighlightAutoLanguageRestriction from "./HighlightAuto.languageRestriction.test.svelte";
 import HighlightAuto from "./HighlightAuto.test.svelte";
+import HighlightAutoWithProps from "./HighlightAuto.withProps.test.svelte";
+import HighlightWithProps from "./Highlight.withProps.test.svelte";
 import LangTag from "./LangTag.test.svelte";
 import LineNumbersCustomStartingLine from "./LineNumbers.customStartingLine.test.svelte";
 import LineNumbersHideBorder from "./LineNumbers.hideBorder.test.svelte";
@@ -71,7 +73,7 @@ test("LineNumbers - custom starting number", async ({ mount, page }) => {
 });
 
 test("Language tag styling", async ({ mount, page }) => {
-  await mount(Highlight, {
+  await mount(HighlightWithProps, {
     props: {
       langtag: true,
       code: "const x = 1;",
@@ -86,7 +88,7 @@ test("Language tag styling", async ({ mount, page }) => {
 });
 
 test("Auto-highlighting detects language", async ({ mount, page }) => {
-  await mount(HighlightAuto, {
+  await mount(HighlightAutoWithProps, {
     props: {
       code: "body { color: red; }",
     },