[BUG] Playwright fails to load files with JSX where components are used via a property on another variable

[luke-john-atlassian]

trafficstars

Context:

• Playwright Version: @playwright/test + playwright-core both on version 1.28.1
• Operating System: Mac
• Node.js version: v16.14.2
• Browser: All

System:

• OS: macOS 11.7
• Memory: 588.09 MB / 32.00 GB

Binaries:

• Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
• Yarn: 1.23.0-atlassian.6 - ~/ .. /node_modules/.bin/yarn
• npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm

Languages:

• Bash: 3.2.57 - /bin/bash

Describe the bug

When using jsx -- if the test (or a file the test imports) includes code where a react component is accessed via a property (ie. a react context Provider) playwright fails at the transpilation/compilation time to load the test.

For the context example in the table above -- running playwright will result in the following console output.

Running 0 tests using 0 workers

/Users/ ... /src/__tests__/pw-test/date/test.tsx:22
  return <Context.Provider value={{}}>Oops</Context.Provider>;
         ^

SyntaxError: Unexpected token '<'

Code Snippet

Example content that will trigger the error when in a test file or a file that is imported by a test

import React from 'react'; const Context = React.createContext({ }); export function Test() { return <Context.Provider value={{}}> Oops </Context.Provider>; }

import React from 'react'; const Context = { Provider: (props) => <div></div> }; export function Test() { return <Context.Provider value={{}}> Oops </Context.Provider>; }

[aslushnikov]

@luke-john-atlassian any chance you can do a small minimalistic repo that has some code that illustrates the issue?

[luke-john-atlassian]

Sure I've setup a demo repo using the init command.

And have made changes which result in the error being encountered on a demo branch.

You can view the changes/branch at this PR https://github.com/luke-john-atlassian/playwright-jsx-minimal-repo/pull/1

And also see the errors show up in the github action test for that PR https://github.com/luke-john-atlassian/playwright-jsx-minimal-repo/actions/runs/3649070740/jobs/6163264386

[aslushnikov]

Somewhat related to https://github.com/microsoft/playwright/issues/19333

[bmsuseluda]

i have a simillar problem when i put JSX in a prop.

const component = await mount(
    <Button icon={<span>This span breaks playwright</span>}>
      click me
    </Button>,
  );

When i remove the span, playwright can render the component. For us it is a big showstopper, because we do this a lot in our components.

Is there a status update for this problem? Thanks for your hard work

[pavelfeldman]

This should be fixed in 1.42