From 7ab4c1751920a9571fe1a1209e4fd780317cb27a Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 18 Oct 2022 15:45:33 -0400
Subject: [PATCH] chore: support jsx/tsx syntax in test files (#18123)

Fixes https://github.com/microsoft/playwright/issues/17964
---
 .../bundles/babel/src/babelBundleImpl.ts      |  5 +++--
 tests/playwright-test/loader.spec.ts          | 21 +++++++++++++++++++
 .../playwright-test-fixtures.ts               |  2 +-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts
index 13c0059afb..14389f8df4 100644
--- a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts
+++ b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts
@@ -41,10 +41,11 @@ export function babelTransform(filename: string, isTypeScript: boolean, isModule
         [require('@babel/plugin-syntax-object-rest-spread')],
         [require('@babel/plugin-proposal-export-namespace-from')]
     );
-  } else {
-    plugins.push([require('@babel/plugin-syntax-jsx')]);
   }
 
+  // Support JSX/TSX at all times, regardless of the file extension.
+  plugins.push([require('@babel/plugin-syntax-jsx')]);
+
   if (!isModule) {
     plugins.push([require('@babel/plugin-transform-modules-commonjs')]);
     plugins.push([require('@babel/plugin-proposal-dynamic-import')]);
diff --git a/tests/playwright-test/loader.spec.ts b/tests/playwright-test/loader.spec.ts
index 60934df71a..734400a10f 100644
--- a/tests/playwright-test/loader.spec.ts
+++ b/tests/playwright-test/loader.spec.ts
@@ -450,3 +450,24 @@ test('should load web server w/o esm loader in ems module', async ({ runInlineTe
   expect(result.passed).toBe(0);
   expect(result.output).toContain('NODE_OPTIONS undefined');
 });
+
+test('should load a jsx/tsx files', async ({ runInlineTest }) => {
+  const { exitCode, passed } = await runInlineTest({
+    'a.spec.tsx': `
+      const { test } = pwt;
+      const component = () => <div></div>;
+      test('succeeds', () => {
+        expect(1 + 1).toBe(2);
+      });
+    `,
+    'b.spec.jsx': `
+      const { test } = pwt;
+      const component = () => <div></div>;
+      test('succeeds', () => {
+        expect(1 + 1).toBe(2);
+      });
+    `
+  });
+  expect(passed).toBe(2);
+  expect(exitCode).toBe(0);
+});
diff --git a/tests/playwright-test/playwright-test-fixtures.ts b/tests/playwright-test/playwright-test-fixtures.ts
index 78100dcdf8..b32d5063d8 100644
--- a/tests/playwright-test/playwright-test-fixtures.ts
+++ b/tests/playwright-test/playwright-test-fixtures.ts
@@ -88,7 +88,7 @@ async function writeFiles(testInfo: TestInfo, files: Files) {
     const header = isTypeScriptSourceFile ? headerTS : (isJSModule ? headerESM : headerJS);
     if (typeof files[name] === 'string' && files[name].includes('//@no-header')) {
       await fs.promises.writeFile(fullName, files[name]);
-    } else if (/(spec|test)\.(js|ts|mjs)$/.test(name)) {
+    } else if (/(spec|test)\.(js|ts|jsx|tsx|mjs)$/.test(name)) {
       const fileHeader = header + 'const { expect } = pwt;\n';
       await fs.promises.writeFile(fullName, fileHeader + files[name]);
     } else if (/\.(js|ts)$/.test(name) && !name.endsWith('d.ts')) {