\n | ^\n 9 |\n 10 |
{controlTestCase.name}
\n 11 |\n\n\n at all.test.ts:8\n\n 6 | test(`test ${testCase.name}`, async ({ page }) => {\n 7 | await page.goto(`http://localhost:5173/${testCase.name}`);\n> 8 | });\n | ^\n 9 | }\n 10 |\n```","url":"https://ray.run/discord-forum/threads/102978-playwright-failing-to-compile-sveltekit-is-it-possible-to-let-sveltekitvite-handle-compilation#message-597889"},{"@type":"Comment","author":{"@type":"Person","name":"anxpara"},"datePublished":"2023-10-19T22:33:02.053Z","text":"and if i change the comment to just text, that's when it switches to the jsx fragment error:\n\n```\nSyntaxError: C:\\Users\\\\\\repos\\getActualClientRect\\trialgrounds\\src\\components\\test-cases\\Control.svelte: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (7:0)\n\n 4 | // just text\n 5 | \n 6 |\n> 7 |
{controlTestCase.name}
\n | ^\n 8 |\n\n\n at all.test.ts:7\n\n 5 | const testCase = allTestCases[i];\n 6 | test(`test ${testCase.name}`, async ({ page }) => {\n> 7 | await page.goto(`http://localhost:5173/${testCase.name}`);\n 8 | });\n 9 | }\n 10 |\n\n\nError: No tests found\n```","url":"https://ray.run/discord-forum/threads/102978-playwright-failing-to-compile-sveltekit-is-it-possible-to-let-sveltekitvite-handle-compilation#message-597887"},{"@type":"Comment","author":{"@type":"Person","name":"anxpara"},"datePublished":"2023-10-19T23:01:01.846Z","text":"based on the faq in the article you linked, i'm not trying to do component testing. i'm using components to define a set of test scenarios at /routes/[testName/+page.svelte, which will be used to test a library i'm building","url":"https://ray.run/discord-forum/threads/102978-playwright-failing-to-compile-sveltekit-is-it-possible-to-let-sveltekitvite-handle-compilation#message-598054"},{"@type":"Comment","author":{"@type":"Person","name":"anxpara"},"datePublished":"2023-10-19T23:01:21.254Z","text":"so i think experimental-ct-svelte is not relevant to my needs","url":"https://ray.run/discord-forum/threads/102978-playwright-failing-to-compile-sveltekit-is-it-possible-to-let-sveltekitvite-handle-compilation#message-598051"},{"@type":"Comment","author":{"@type":"Person","name":"anxpara"},"datePublished":"2023-10-19T23:39:57.362Z","text":"i managed to isolate what's causing the error.\n\nBoth the app and playwright compile and run fine with a file like this:\n\n```ts\nimport type { ComponentType } from 'svelte';\nimport type Matcher from '../components/Matcher.svelte';\nimport Control from '../components/test-cases/Control.svelte';\n\nlet matcher: Matcher | undefined = undefined;\n//let testType: ComponentType = Control;\n```\n\nThe app will run fine, but playwright will fail to compile with a file like this:\n\n```ts\nimport type { ComponentType } from 'svelte';\nimport type Matcher from '../components/Matcher.svelte';\nimport Control from '../components/test-cases/Control.svelte';\n\nlet matcher: Matcher | undefined = undefined;\nlet testType: ComponentType = Control;\n```\n\nI think playwright can't handle when svelte components are used as ComponentType values in .ts files","url":"https://ray.run/discord-forum/threads/102978-playwright-failing-to-compile-sveltekit-is-it-possible-to-let-sveltekitvite-handle-compilation#message-598204"},{"@type":"Comment","author":{"@type":"Person","name":"anxpara"},"datePublished":"2023-10-20T00:21:46.171Z","text":"playwright failing to compile svelte/kit. Is it possible to let sveltekit/vite handle compilation?","url":"https://ray.run/discord-forum/threads/102978-playwright-failing-to-compile-sveltekit-is-it-possible-to-let-sveltekitvite-handle-compilation#message-598385"},{"@type":"Comment","author":{"@type":"Person","name":"anxpara"},"datePublished":"2023-10-20T02:15:52.601Z","text":"I found a workaround. As long as the \\*.test.ts file doesn't directly depend on any \\*.ts files that use svelte components as ComponentType values, then the test will run fine. So in my case, I created a testNames.ts file, and then imported the list of test names from that file in all.test.ts","url":"https://ray.run/discord-forum/threads/102978-playwright-failing-to-compile-sveltekit-is-it-possible-to-let-sveltekitvite-handle-compilation#message-599167"}],"dateModified":"2023-10-20T02:15:52.601Z","datePublished":"2023-10-19T02:37:49.122Z","discussionUrl":"https://ray.run/discord-forum/threads/1164391928549355580-playwright-failing-to-compile-sveltekit-is-it-possible-to-let-sveltekitvite-handle-compilation","headline":"playwright failing to compile svelte/kit. Is it possible to let sveltekit/vite handle compilation?","url":"https://ray.run/discord-forum/"}
playwright failing to compile svelte/kit. Is it possible to let sveltekit/vite handle compilation?
Edit:
i managed to isolate what's causing the error.
Both the app and playwright compile and run fine with a file like this:
import type { ComponentType } from 'svelte';
import type Matcher from '../components/Matcher.svelte';
import Control from '../components/test-cases/Control.svelte';
let matcher: Matcher | undefined = undefined;
//let testType: ComponentType = Control;
The app will run fine, but playwright will fail to compile with a file like this:
import type { ComponentType } from 'svelte';
import type Matcher from '../components/Matcher.svelte';
import Control from '../components/test-cases/Control.svelte';
let matcher: Matcher | undefined = undefined;
let testType: ComponentType = Control;
I think playwright can't handle when svelte components are used as ComponentType values in .ts files
Original post:
So I'm trying playwright for the first time, but I can't get it to compile the test that i wrote.
Code:
https://gist.github.com/anxpara/5f71c540e4692cd68d91c7b60c0003b2
This thread is trying to answer question "Why is Playwright failing to compile Svelte/Kit and is it possible to let SvelteKit/Vite handle compilation?"
12 replies
Hi, I don't have experience with Playwright component testing but I saw in your test you were importing @playwright/test, which in your case should be @playwright/experimental-ct-svelte instead.
There is more documentation for the component testing here:
https://playwright.dev/docs/test-components
that got me past the earlier error
actually i was mistaken. switching to that didn't fix the original issue
also, when i run the tests in vscode, the tests hang and then run indefinitely, and there's no way for me to stop them so i can run them again. i have to close vscode every time. it's very annoying, and it's really slowing me down
i can try running on the command line though
so if i comment that instance function out entirely, the error moves to the closing tag:
SyntaxError: c:\Users\\\repos\getActualClientRect\trialgrounds\src\components\test-cases\Control.svelte: Unexpected token (8:1)
6 | // return testElement;
7 | // }
> 8 | </script>
| ^
9 |
10 | <div bind:this={testElement} class="test-element control">{controlTestCase.name}</div>
11 |
at all.test.ts:8
6 | test(`test ${testCase.name}`, async ({ page }) => {
7 | await page.goto(`http://localhost:5173/${testCase.name}`);
> 8 | });
| ^
9 | }
10 |
and if i change the comment to just text, that's when it switches to the jsx fragment error:
SyntaxError: C:\Users\\\repos\getActualClientRect\trialgrounds\src\components\test-cases\Control.svelte: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (7:0)
4 | // just text
5 | </script>
6 |
> 7 | <div bind:this={testElement} class="test-element control">{controlTestCase.name}</div>
| ^
8 |
at all.test.ts:7
5 | const testCase = allTestCases[i];
6 | test(`test ${testCase.name}`, async ({ page }) => {
> 7 | await page.goto(`http://localhost:5173/${testCase.name}`);
8 | });
9 | }
10 |
Error: No tests found
@refactoreric: based on the faq in the article you linked, i'm not trying to do component testing. i'm using components to define a set of test scenarios at /routes/[testName/+page.svelte, which will be used to test a library i'm building
based on the faq in the article you linked, i'm not trying to do component testing. i'm using components to define a set of test scenarios at /routes/[testName/+page.svelte, which will be used to test a library i'm building
so i think experimental-ct-svelte is not relevant to my needs
i managed to isolate what's causing the error.
Both the app and playwright compile and run fine with a file like this:
import type { ComponentType } from 'svelte';
import type Matcher from '../components/Matcher.svelte';
import Control from '../components/test-cases/Control.svelte';
let matcher: Matcher | undefined = undefined;
//let testType: ComponentType = Control;
The app will run fine, but playwright will fail to compile with a file like this:
import type { ComponentType } from 'svelte';
import type Matcher from '../components/Matcher.svelte';
import Control from '../components/test-cases/Control.svelte';
let matcher: Matcher | undefined = undefined;
let testType: ComponentType = Control;
I think playwright can't handle when svelte components are used as ComponentType values in .ts files
playwright failing to compile svelte/kit. Is it possible to let sveltekit/vite handle compilation?
I found a workaround. As long as the *.test.ts file doesn't directly depend on any *.ts files that use svelte components as ComponentType values, then the test will run fine. So in my case, I created a testNames.ts file, and then imported the list of test names from that file in all.test.ts
