playwright failing to compile for sveltekit project

+page.svelte

<!-- /routes/[testName]/+page.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
  import { onMount, tick } from 'svelte';
  import Matcher from '../../components/Matcher.svelte';
  import { testCasesByName, type Test } from '../../data/testCases';

  let matcher: Matcher;
  $: test = testCasesByName.get($page.params.testName)!;

  onMount(async () => {
    await tick();

    if (!test?.testComponent) {
      throw new Error('test component failed to load');
    }

    matcher.match(test.testComponent.getTestElement(), test);
  });
</script>

<div class="lone-test-container">
  <svelte:component this={test.testType} bind:this={test.testComponent} />
</div>
<div class="matcher-container">
  <Matcher bind:this={matcher} />
</div>

all.test.ts

import { allTestCases } from '../src/data/testCases';
import { test } from '@playwright/test';

for (let i = 0; i < allTestCases.length; i++) {
  const testCase = allTestCases[i];
  test(`test ${testCase.name}`, async ({ page }) => {
    await page.goto(`http://localhost:5173/${testCase.name}`);
  });
}

Control.svelte

<script lang="ts">
  import { controlTestCase } from '../../data/testCases';

  let testElement: HTMLElement;
  export function getTestElement(): HTMLElement {
    return testElement;
  }
</script>

<div bind:this={testElement} class="test-element control">{controlTestCase.name}</div>

error

SyntaxError: c:\Users\\Desktop\repos\\\src\components\test-cases\Control.svelte: Unexpected token (6:4)

  4 |   let testElement: HTMLElement;
  5 |   export function getTestElement(): HTMLElement {
> 6 |     return testElement;
    |     ^
  7 |   }
  8 | </script>
  9 |

   at all.test.ts:6

  4 | for (let i = 0; i < allTestCases.length; i++) {
  5 |   const testCase = allTestCases[i];
> 6 |   test(`test ${testCase.name}`, async ({ page }) => {
    |    ^
  7 |     await page.goto(`http://localhost:5173/${testCase.name}`);
  8 |   });
  9 | }


Error: No tests found

testCases.ts

import type { SvelteComponent, ComponentType } from 'svelte';
import type Matcher from '../components/Matcher.svelte';
import Control from '../components/test-cases/Control.svelte';
import SubPixelSize from '../components/test-cases/SubPixelSize.svelte';

export interface TestControls {
  getTestElement: () => HTMLElement;
}

export type TestComponent = SvelteComponent & TestControls;

export type Test = {
  name: string;
  testType: ComponentType<TestComponent>;
  testComponent?: TestComponent;
  matcher?: Matcher;
};

export const controlTestCase: Test = {
  name: 'control',
  testType: Control,
};
export const subPixelSizeTestCase: Test = {
  name: 'sub-pixel-size',
  testType: SubPixelSize,
};

export const allTestCases = [
  controlTestCase,
  subPixelSizeTestCase,
];
export const allTestNames = allTestCases.map((test) => test.name);
export const testCasesByName: Map<string, Test> = new Map<string, Test>(
  allTestCases.map((test) => [test.name, test]),
);