playwright: [Question] Can someone help with Unknown file extension ".svelte" error for component test?

Context:

Playwright Version: 1.25.1
Operating System: Ubuntu 22.04.1 (WSL2 - Windows 11)
Node.js version: 16.17.0
Browser: All
Extra: SvelteKit

Hi guys, can someone help with the issue below? I’m not used to Javascript/Node or anything related to frontend.

I have this project (for study) with KoaJS for the backend, SvelteKit for the frontend and Playwright to do all API/E2E/Component tests.

I tried to setup the Component Test for the Button.svelte component but here is the error is occurring. Thanks in advance.

> git clone https://github.com/ltsuda/learning-tests.git
> git switch test/initial-component
> npm i
> npx playwright install
> npm run test-ct

> learning-tests@1.0.0 test-ct
> playwright test -c playwright-ct.config.js


Running 0 tests using 0 workers
TypeError: Unknown file extension ".svelte" for /home/ltsuda/developer/learning-tests/frontend/src/components/button/Button.svelte

    at async Promise.all (index 1)

=================
 no tests found.
=================


  1 error was not a part of any test, see above for details

To open last HTML report run:

  npx playwright show-report

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 15 (10 by maintainers)

Most upvoted comments

Hi, SvelteKit maintainer here

I believe SvelteKit no longer uses @sveltejs/vite-plugin-svelte and uses @sveltejs/kit/vite instead to build the apps with Vite.

We do use @sveltejs/vite-plugin-svelte, but also use other plugins as well. The problem with ctViteConfig is that you’re going to end up missing all the configuration that’s in the vite.config.js and svelte.config.js, which is what appears to be happening here.

Which suggests that we should have a dedicated @playwright/experimental-ct-sveltekit for SvelteKit specifically. Unfortunately, our problem with SvelteKit is that it breaks us with every minor release, so we are not chasing it at the moment.

I wouldn’t do that, but just use the user’s vite.config.js which already has all the plugins setup. You may need to remove one of our plugins if it takes over the build, but I would try to avoid adding any configuration of your own. See my comment here: https://github.com/microsoft/playwright/issues/18825#issuecomment-1421523694

benmccann on Feb 7, 2023

SvelteKit is stable now 🤩 Would love component testing support

alexbjorlig on Jan 10, 2023

you can try to use npm init playwright@latest -- --ct to generate the config. see here

and you can add vite config here instead of vite.config.js

cheapCoder on Aug 25, 2022