Special/Custom Routes (for running Playwright tests to do unit tests on .svelte files)

[DoisKoh]

Alright so the real issue I'm having stems from not having a really nice way to run unit tests on .svelte components. I find the most reliable way might be to run Playwright tests on a special route in the site just for testing (and maybe disable that route in production?)

So what I've tried now is to put a src/routes/tests folder that mirrors my src/lib/components folder...

Example:

src/lib/components/basic/Button/
├ index.svelte
├ test.svelte
└ index.test.ts

src/routes/tests/components/basic/
└ [basics].svelte

and in [basics].svelte I dynamically load the test.svelte component (which instantiates the index.svelte component - test.svelte serves as an example on how to use the component, and instantiates it for Playwright to run tests on).

[basics].svelte:

<script lang="ts">
    import { page } from '$app/stores';

    let imports = import.meta.glob(`/src/lib/**/test.svelte`);
    let path = $page.url.pathname.split('/tests/')[1];
    let testComponentPath = `/src/lib/${ path }/test.svelte`;

    let component = imports[testComponentPath];
</script>

<div class="p-6">
    <div class="my-4">
        <span class="font-bold">Test Component:</span> {path}
    </div>
    <div class="border-red-500 border-2 shadow-e-12">
        {#if component}
            {#await component() then module}
                <svelte:component this={module['default']} />
            {/await}
        {:else}
            Loading Dynamic Component...
        {/if}
    </div>
</div>

Then index.test.ts, which is a Playwright test, is meant to visit that route (/tests/components/basic/Button) and run whatever tests on that component I need.

The problem with this is that I'm duplicating my src/lib/components folder structure in the routes, which is not nice for maintenance. I'm trying to do it in this way so I can keep my component with its tests and examples.

I'm thinking if we have more options on how to customize the routes (I know this goes against making things simple for beginners), I can have some kind of regex just match the src/lib/components/**/test.svelte and serve those instead.

Is it actually already possible now, just that I don't know how to do it? Is this actually terrible idea? 😞