[BUG] experimental-ct-svelte - unable to dynamically pass svelte:component as prop

[YoloClin]

I have a component which executes <svelte:component this={someValue} /> - I cannot find a way for someValue to be passed via playwright mount (e.g., mount(Parent, { params: {someValue: Child}}) - if I pass the svellte component directly as per this example, I get SyntaxError: .../my-app/src/lib/Child.svelte: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:0). I cannot find another way to pass the component to the parent object, the Svelte syntax to do so would be <Parent someValue={Child} /> so in my eyes the above Playwright example would be consistent with the 'svelte way'. Please note I am using Svelte and do not have JSX components, the error message is misleading.

I'm unsure if this is related to https://github.com/microsoft/playwright/issues/23086 .

System info

• Playwright Version: 1.37.1
• Operating System: Ubuntu 22.04
• Browser: All
• Other info:

Source code

https://github.com/YoloClin/playwright-svelte-component-bug

Steps

• npm run test-ct fails when a child object is passed as a prop, there are two tests - one where the object is not specified, which inside the parent object conditionally checks if the value has been defined and if not sets the value to Child which works fine. Test to passes Child from the playwright test, which causes the above error message.

Expected

No Crash

Actual

SyntaxError: .../my-app/src/lib/Child.svelte: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:0). Please note I am using Svelte and do not have JSX components, the error message is misleading.

[dgozman]

Team discussion notes:

• Recommend the "stories" workflow.
• Update documentation and examples towards "stories".
• Check the interop between "stories" and hooks in playwright/index.tsx.

[YoloClin]

If you need someone to informally test these, I'd be interested in using an unstable build as I'm coding some fairly prickly dynamic svelte so it might help us both - if such testing would help, tag me when a commit fixes this issue :)

[anxpara]

I'm experiencing a similar issue, not sure if it's the same thing, so i'll document it here. Just fyi, i'm not using experimental-ct-svelte, since i'm not doing component testing, rather, i'm using a list of components to define scenarios and then i'm testing those scenarios with playwright.

Here's most of my code: https://gist.github.com/anxpara/5f71c540e4692cd68d91c7b60c0003b2

i managed to isolate what's causing the error:

Both my 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;

My app will run fine, but playwright will fail to compile if a test file depends on 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. I found a workaround for my issue--as long as no test.ts files depend on any .ts files that use components as ComponentType values, then the tests will compile and run fine. So in my case, instead of importing allTests.ts (which contains ComponentType values) in my all.test.ts file, I created a testNames.ts file, and then imported the list of test names from that file in all.test.ts