chore: use custom JSX runtime to stub-out erroneous JSX usage (#22827)

Fixes https://github.com/microsoft/playwright/issues/22789

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')]);

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,
+};

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"

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': `