[Bug]: Svelte 4 component testing not working

[ryanzec]

Version

1.43.1

Steps to reproduce

clone this repo: https://github.com/ryanzec/edg-ui
run pnpm install
run pnpm test:components

Expected behavior

test should run

Actual behavior

error after code builds

✓ built in 8.15s

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://kit.svelte.dev/docs/adapters to learn how to configure your app to run on the platform of your choosing
Error: ENOENT: no such file or directory, open '/Users/ryanzec/repositories/edg-ui/playwright/.cache/metainfo.json'
  1 did not run

To open last HTML report run:

  pnpm exec playwright show-report

 ELIFECYCLE  Command failed with exit code 1.

Additional context

I followed the guide on the website an initially I got an error when it tried to compile code with TS:

vite v5.2.11 building for production...
✓ 4 modules transformed.
RollupError: [vite-plugin-svelte] [plugin vite-plugin-svelte] src/lib/components/core/button/button.svelte (2:9): /Users/ryanzec/repositories/edg-ui/src/lib/components/core/button/button.svelte:2:9 Unexpected token

- Did you forget to add a TypeScript preprocessor? See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md for more information.
file: /Users/ryanzec/repositories/edg-ui/src/lib/components/core/button/button.svelte:2:9
 1 |  <script context="module" lang="ts">
 2 |    export enum ButtonVariant {
               ^
 3 |      FILLED = 'filled',
 4 |      WEAK = 'weak',

so I have to add in the sveltekit plugin to the playwright config but then I get this error.

Environment

System:
    OS: macOS 12.7.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 33.79 MB / 16.00 GB
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.0.6 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
  IDEs:
    VSCode: 1.89.0 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/experimental-ct-svelte: 1.44.0 => 1.44.0
    @playwright/test: 1.43.1 => 1.43.1

[ryanzec]

After more searching, instead of the adding the sveltekit plugin, I needed to add the svelte plugin like this:

ctViteConfig: {
  plugins: [svelte({ preprocess: vitePreprocess() })],
  resolve: { alias: { $lib: path.resolve('src/lib') } },
},

I don't know if it should work with the sveltekit plugin but since this is for component test, sveltekit really is not needed.

While there does not seems to be a bug in playwright itself, it would be helpful for this to live on the component testing page so that people don't follow the guide and have it not work and not know why.

If this should work with sveltekit too (which I guess would be good for testing that components work with SSR), I have no idea if that is a bug in Playwright and configuration that I am not able to figure out.

[ryanzec]

I would add that I do think being able to using sveltekit with playwright is important if possible as components will often use $app/* which is part of sveltekit.

[alexmilde]

Thanks for the plugins solution.

Like you said. without a solution for $app component tests are unusable if you use ehanced forms.

[apttx]

i just encountered the same issue. all i had to do was create the playwright/.cache/ directory and playwright was able to write the metainfo.json into it and run my tests with my entire vite config.