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

[ltsuda]

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

> [email protected] 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

[cheapCoder]

it seems to you need use compiler to transform the svelte to js, you can try this in you playwright.config.ts.
there is a ctViteConfig option in use. you can check the type if using ts. It's so bad that the docs do not show it

use: {
    ctViteConfig: {
      build: {
        sourcemap: true
      },
      plugins: [
        svelte({
          preprocess: preprocess({
            typescript: true,
            scss: true,
            sass: true,
            postcss: true
          })
        })
      ],
      resolve: {
        alias: {
          '~': resolve(__dirname, './src')
        }
      }
    }
  }

[ltsuda]

it seems to you need use compiler to transform the svelte to js, you can try this in you playwright.config.ts. there is a ctViteConfig option in use. you can check the type if using ts. It's so bad that the docs do not show it

use: {
    ctViteConfig: {
      build: {
        sourcemap: true
      },
      plugins: [
        svelte({
          preprocess: preprocess({
            typescript: true,
            scss: true,
            sass: true,
            postcss: true
          })
        })
      ],
      resolve: {
        alias: {
          '~': resolve(__dirname, './src')
        }
      }
    }
  }

I will try that later as I'm at work right now, but thanks for the help :)

[ltsuda]

Do you guys think I need to install svelte on the root directory of the project? As I'm using npm workspaces, the sveltekit is only present at the frontend directory, so I couldn't find the correct way to import svelte/preprocess, etc.

Also, my playwright-ct.config is a Javascript file, not Typescript

[ltsuda]

I tried the suggestions but using the vite.config.js and svelte.config.js and got the same result, but I might have done it wrong

https://github.com/ltsuda/learning-tests/commit/4162751042451b6b3af19c576d8bb2f4088203df

[cheapCoder]

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

[ltsuda]

Same issue

https://github.com/ltsuda/learning-tests/blob/test/initial-component/playwright-ct.config.js

[pavelfeldman]

I believe SvelteKit no longer uses @sveltejs/vite-plugin-svelte and uses @sveltejs/kit/vite instead to build the apps with Vite. 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.

[pavelfeldman]

@sand4rt fyi in case you are interested in it. I recently removed our tests for SvelteKit because it changed again and broke us :)

[ltsuda]

I believe SvelteKit no longer uses @sveltejs/vite-plugin-svelte and uses @sveltejs/kit/vite instead to build the apps with Vite. 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.

Understood, I didn't remember Sveltekit being still in beta. I'm sorry about that.

I will hold my studies about component test on my repo for now and focus on another area, like the contract tests.

Thanks for the information and for the time guys <3

[sand4rt]

@sand4rt fyi in case you are interested in it. I recently removed our tests for SvelteKit because it changed again and broke us :)

Oops! Thanks for letting me know. Not sure why they failed because they passed locally on my machine. I'll have a look at that when in find some time.

[sand4rt]

@ltsuda SvelteKit has reached release candidate status! See the announcement: https://www.youtube.com/watch?v=A8jkJTWacow&t=29628s. They say they have no more planned breaking changes.

@sand4rt fyi in case you are interested in it. I recently removed our tests for SvelteKit because it changed again and broke us :)

@pavelfeldman I can't reproduce it, should i still take a look at this?

[ltsuda]

Thanks for the message, I have try again sometime. Whenever you guys want to close this, it's fine for me. If I have any other problem again, I can open a new issue.
Thanks again for the help :)

[alexbjorlig]

SvelteKit is stable now 🤩 Would love component testing support

[benmccann]

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: #18825 (comment)

[pavelfeldman]

Why was this issue closed?

Thank you for your involvement. This issue was closed due to limited engagement (upvotes/activity), lack of recent activity, and insufficient actionability. To maintain a manageable database, we prioritize issues based on these factors.

If you disagree with this closure, please open a new issue and reference this one. More support or clarity on its necessity may prompt a review. Your understanding and cooperation are appreciated.