From 9c25a042671921e198a2f411a279d16753042191 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 4 May 2023 11:44:59 -0700
Subject: [PATCH] chore: use custom JSX runtime to stub-out erroneous JSX usage
 (#22827)

Fixes https://github.com/microsoft/playwright/issues/22789
---
 .../bundles/babel/src/babelBundleImpl.ts      |  5 ++-
 packages/playwright-test/jsx-runtime.js       | 34 +++++++++++++++++++
 packages/playwright-test/package.json         |  1 +
 tests/playwright-test/loader.spec.ts          | 27 +++++++++++++++
 4 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 packages/playwright-test/jsx-runtime.js

diff --git a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts
index e124dae03b..0e1a9b73c7 100644
--- a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts
+++ b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts
@@ -70,7 +70,10 @@ export function babelTransform(filename: string, isTypeScript: boolean, isModule
   }
 
   // Support JSX/TSX at all times, regardless of the file extension.
-  plugins.push([require('@babel/plugin-transform-react-jsx')]);
+  plugins.push([require('@babel/plugin-transform-react-jsx'), {
+    runtime: 'automatic',
+    importSource: '@playwright/test'
+  }]);
 
   if (!isModule) {
     plugins.push([require('@babel/plugin-transform-modules-commonjs')]);
diff --git a/packages/playwright-test/jsx-runtime.js b/packages/playwright-test/jsx-runtime.js
new file mode 100644
index 0000000000..bf03de3a5a
--- /dev/null
+++ b/packages/playwright-test/jsx-runtime.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function jsx(type, props) {
+  return {
+    type,
+    props,
+  };
+}
+
+function jsxs(type, props) {
+  return {
+    type,
+    props,
+  };
+}
+
+module.exports = {
+  jsx,
+  jsxs,
+};
diff --git a/packages/playwright-test/package.json b/packages/playwright-test/package.json
index 37bc3759b4..37010d02a9 100644
--- a/packages/playwright-test/package.json
+++ b/packages/playwright-test/package.json
@@ -23,6 +23,7 @@
     "./lib/internalsForTest": "./lib/internalsForTest.js",
     "./lib/experimentalLoader": "./lib/experimentalLoader.js",
     "./lib/plugins": "./lib/plugins/index.js",
+    "./jsx-runtime": "./jsx-runtime.js",
     "./lib/util": "./lib/util.js",
     "./lib/utilsBundle": "./lib/utilsBundle.js",
     "./reporter": "./reporter.js"
diff --git a/tests/playwright-test/loader.spec.ts b/tests/playwright-test/loader.spec.ts
index 9a39ddd616..5671b09855 100644
--- a/tests/playwright-test/loader.spec.ts
+++ b/tests/playwright-test/loader.spec.ts
@@ -474,6 +474,33 @@ test('should load a jsx/tsx files', async ({ runInlineTest }) => {
   expect(exitCode).toBe(0);
 });
 
+test('should load jsx with top-level component', async ({ runInlineTest }) => {
+  const { exitCode, passed } = await runInlineTest({
+    'a.spec.tsx': `
+      import { test, expect } from '@playwright/test';
+      const component = <div>Hello <span>world</span></div>;
+      test('succeeds', () => {
+        expect(component).toEqual({
+          type: 'div',
+          props: {
+            children: [
+              'Hello ',
+              {
+                type: 'span',
+                props: {
+                  children: 'world'
+                },
+              }
+            ]
+          },
+        });
+      });
+    `,
+  });
+  expect(passed).toBe(1);
+  expect(exitCode).toBe(0);
+});
+
 test('should load a jsx/tsx files with fragments', async ({ runInlineTest }) => {
   const { exitCode, passed } = await runInlineTest({
     'helper.tsx': `