Respect jsxImportSource from tsconfig instead of using mock jsx implementation

[rubber-duck-software]

Currently playwright ignores whatever jsx configuration settings are used in your tsconfig and instead uses a mock implementation of jsx. This was introduced to resolve #22789. However, respecting the jsx configuration supplied in tsconfig is the better behavior. This would resolve the issue described in #26863.

Since playwright loads the tsconfig anyways, this change would be minimally invasive.

[rubber-duck-software]

Hi @pavelfeldman - when I first raised this issue, I was not aware the number of upvotes it received would be meaningful, so I made no effort to engage the playwright community.

Since PR #26884 was closed, I started engaging with more people on this issue. Are willing to reevaluate accepting the PR in light of 16 upvotes?

[rubber-duck-software]

Hey @pavelfeldman - this is the third most upvoted issue currently assigned to you. Can you give an update on your thoughts here? What can I do to get the ball rolling on this bug fix again? If I opened a new PR, would it get reviewed?

[rubber-duck-software]

Hey @dgozman - it looks like @pavelfeldman is not able to engage on this one for now. Would you be willing to review a PR if I opened one up again?

[lo1tuma]

I’ve just run into this issue as well. And it was quite hard to figure out what is going on, because the only thing I got was a react error Objects are not valid as a React child (found: object with keys {__pw_type, type, props, key}). If you meant to render a collection of children, use an array instead.

Is there any workaround available to disable the jsx mock? The only option I see at the moment is to precompile the typescript files on my own.

[rubber-duck-software]

@lo1tuma - as far as I know, precompiling is the only option (except for version ~1.31.0 where this briefly worked). If you find a better alternative, please let me know 🙏.

[phil294]

:(

[mleonhard]

NodeJS and Jest can run TypeScript code directly, without a separate compilation step. I'm using TypeScript and Preact to render JSX on the server, with HTMX on the frontend. For test isolation, I need the browser tests to run the server. I need Playwright to load the standard typescript config. Until it does, I will try to work around it by setting up builds just for Playwright. I may also try https://github.com/playwright-community/jest-playwright, but that hasn't been updated since 2023.

[reteps]

Here is a workaround: at the top of your test file (e.g. check-working.spec.tsx), do:

/** @jsxImportSource @prairielearn/preact-cjs */

Since Playwright uses babel, babel will use this comment (https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/).

You could then enforce this with a lint rule, like:

  {
    // Enforce JSX import source comment in e2e test files.
    files: ['apps/prairielearn/src/tests/e2e/**/*.tsx'],
    rules: {
      // We need to ensure that Preact is used for JSX, not playwright's own JSX implementation.
      // https://github.com/microsoft/playwright/issues/26936
      // https://github.com/microsoft/playwright/blob/0e881eb3ed3682a1f3e40f3e6029a0103d4916f6/packages/playwright/bundles/babel/src/babelBundleImpl.ts#L74
      'header/header': ['error', 'block', '* @jsxImportSource @prairielearn/preact-cjs ', 2],
    },
  },