chore: support jsx/tsx syntax in test files (#18123)

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

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

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

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')) {