Discussion on: Test Svelte Component Using Vitest & Playwright

[SlavCo Zute]

Great post!
However, I can't seem to get Playwright to mount Svelte component properly. Wondering if you had similar issue?

And this is my App.svelte

<script>
  import Header from "./lib/components/header/Header.svelte";
</script>

<main>
  <Header />
</main>

and Playwright Config

import type { PlaywrightTestConfig } from '@playwright/experimental-ct-svelte';
import { resolve } from 'node:path';
import {svelte} from "@sveltejs/vite-plugin-svelte";

const config: PlaywrightTestConfig = {
    testDir: 'tests',
    use: {
        ctViteConfig: {
            plugins: [svelte()],
            resolve: {
                alias: {
                    // Setup the built-in $lib alias in SvelteKit
                    $lib: resolve('src/lib')
                }
            }
        }
    }
};

export default config;

[David Peng]

I did encounter the same problem, it turned out that we can't add plugins: [svelte()] under ctViteConfig.
There are some bugs/ conflicts after recent breaking changes of SvelteKit and Vite 3.0.

[SlavCo Zute]

Interesting. I don't actually use SvelteKit but just plain Svelte app.
So, have you found the way around the issue or how did you got it to work in your original post?

[David Peng]

If you use the playwright-ct.config.ts in my original post, it should work.