[BUG] `Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?` for svelte component testing

[aidvai-sp]

Hi, when using playwright to create and execute component testing, I get this error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?. It looks like playwright is trying to test my component as it was react component?

To add component testing to SvelteKit project, I used command from the docs of the playwright: npm init playwright@latest -- --ct. The project itself was created using SvelteKit creation command: npm create svelte@latest playwright-bug

System info

• Playwright Version: playwright/test: ^1.28.1, playwright/experimental-ct-svelte: ^1.33.0 (copied from package.json)
• Operating System: Windows 10
• Browser: All
• Other info: SvelteKit version: ^1.5.0, Svelte version: 3.54.0, vite version: 4.3.0

Source code

• [x] I provided exact source code that allows reproducing the issue locally. https://github.com/aidvai-sp/playwright-bug

Steps

• Run npm run test-ct

Expected Tests are run and their results are given back

Actual Got error Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?, which is meant for react so it doesn't work here.

Edit: I found that these tests are working on my other computer, but all I did was clone the repository, do npm install (browsers are already install from before) and run them using npm run test-ct

[syedddanishalinaqvi]

think the error is in Text.svelte file. The correct code should be :

<>
 <script lang="ts">
	export let text: string;
	export let important = false;
 </script>
<p>
	{text}
	{#if important}
		!
	{/if}
  </p>

 </>

As i am new i think this should be the error

[aidvai-sp]

This works for react, but I use svelte

[dgozman]

@aidvai-sp I managed to reproduce the issue with @playwright/[email protected], but not with @playwright/experimental-ct-svelte@next, so it seems to be fixed in the recent release. I'd recommend to try a canary release for now to see whether it fixes the issue for you.

[aidvai-sp]

@dgozman still the same error. Both @playwright/test and @playwright/experimental-ct-svelte are set to 1.34.0-alpha-may-18-2023 version. Full error that I get when running it:

PS C:\Users\aidvai\Documents\js\playwright-bug> npm run test-ct

> [email protected] test-ct
> playwright test -c playwright-ct.config.ts


SyntaxError: C:\Users\aidvai\Documents\js\playwright-bug\src\lib\Text.svelte: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (6:0)

  4 | </script>
  5 |
> 6 | <p>
    | ^
  7 |   {text}
  8 |   {#if important}
  9 |           !


   at Text.test.ts:6

  4 | test.describe('Chip tests', () => {
  5 |   test('Should display passed text', async ({ mount }) => {
> 6 |           const component = await mount(Text, {
  7 |                   props: {
  8 |                           text: 'Test'
  9 |                   }



Error: No tests found





To open last HTML report run:

  npx playwright show-report

I also updated my repository with new versions that I used. When I tried it on my other PC, it worked flawlessly.

Edit: when using @playwright/test version ^1.33.0, I get error without the snippet of the test itself:

PS C:\Users\aidvai\Documents\js\playwright-bug> npm run test-ct

> [email protected] test-ct
> playwright test -c playwright-ct.config.ts


Error: C:\Users\aidvai\Documents\js\playwright-bug\src\lib\Text.svelte: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (6:0)

  4 | </script>
  5 |
> 6 | <p>
    | ^
  7 |   {text}
  8 |   {#if important}
  9 |           !




Error: No tests found





To open last HTML report run:

  npx playwright show-report

I created separate branch for this version

[dgozman]

@aidvai-sp Not sure how to help you here. There's probably something wrong with your setup, but I am not sure what.

• Maybe you have a globally installed playwright somewhere? Run npm -g ls to check that.
• Maybe you have some cached files stuck somewhere? Run rm -rf playwright/.cache and try removing temporary folders on your computer.
• Try to checkout your sample repo to a different folder and follow the repro steps. Does it repro again?

[aidvai-sp]

I tried all of these, nothing worked. Maybe there is some way I could see some more logs from playwright? Maybe it would help find what's wrong with it

[dgozman]

@aidvai-sp You can try running with DEBUG=pw:test environment variable, but I am not sure there are logs related to JSX compilation.

[dgozman]

We have to reproduce this issue locally to be able to debug it. Unfortunately, the issue seems very specific to your setup. If you gather new information that could help us figure out the problem, please file a new issue and link to this one.

[Thevetat]

> playwright test -c testing/playwright/component.config.ts


SyntaxError: /home/dean/Git/Vite/nBase/src/App.vue: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:0)

  3 | </template>
  4 |
> 5 | <script setup lang="ts">
    | ^
  6 | </script>
  7 |


   at component/App.spec.ts:5

  3 |
  4 | test.use({ viewport: { width: 500, height: 500 } })
> 5 |
  6 | test('should work', async ({ mount }) => {
  7 |   const component = await mount(App)
  8 |   await expect(component).toContainText('Vite + Vue')

this is my App.vue

<template>
  <RouterView />
</template>

<script setup lang="ts">
</script>

This is the test:

import { expect, test } from '@playwright/experimental-ct-vue'
import App from '../../../src/App.vue'

test.use({ viewport: { width: 500, height: 500 } })

test('should work', async ({ mount }) => {
  const component = await mount(App)
  await expect(component).toContainText('Vite + Vue')
})

Same error as in the svelte file, not sure how to diagnose.

[Feroks]

I am having the same issue. @aidvai-sp did you find a solution?

[YoloClin]

I was able to trigger this bug with the above sample repo within a docker container using docker run -it -v $(pwd):/sync --entrypoint bash node:latest - I have a similar issue running npm on my host (23.04) when attempting to use a svelte:component entity:

<svelte:component this={component} ... />

import Test from './test-components/Test.svelte';

test.use({ viewport: { width: 500, height: 500 } });

test('should work', async ({ mount }) => {
  //  const component = await mount(Test, {});
  let test = "Test";
  const component = await mount(App, {
    props: {
      component: Test,
    }
  });

> playwright test -c playwright-ct.config.ts
SyntaxError: .../components/src/lib/test-components/Test.svelte: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:0)

  3 | </script>
  4 |
> 5 | <h1>Hello World</h1>

Please let me know if a more complete sample is required.

[markjaquith]

I've been having this issue too. The last stable version of @playwright/experimental-ct-svelte for me was 1.29.2... everything after that has been broken.