Skip to content

feat: JSX template support #43

@pfteter

Description

@pfteter

Prerequisites

Describe the Feature Request

Since PW stencil component tests use a string to define the component test setup it doesn't support multiple things that playwright component testing does like JSX mount.

Same as playwright component tests, stencil sould support JSX for setContent/ mount.

I was able to get it working using a jsx to string converter (mount is a fixture > page.setContent):

test('Button test', async ({mount}) => {
     const {container} = await mount(
    <stencil-button color={ButtonColor.PRIMARY} testSelector="save-button">
      Save
    </stencil-button>,
  )
}  

Benefits are obvious - highlighting, typing ...

Describe the Use Case

Component tests (setContent) should support syntax highlighting, typing, autocomplete ....

Describe Preferred Solution

Fo a working PoC I used:

      const html = jsxToString(jsxSource);
      await page.setContent(extendedHtml(html), options);

I used a library that renders JSX to string.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions