From e26fd0d967349ce43fd7498283e95c0a28c14687 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 29 Feb 2024 11:26:45 -0800
Subject: [PATCH] fix(ct): stop-gap for shared file import

---
 .../playwright-ct-core/src/tsxTransform.ts    | 37 ++++++++++---------
 .../playwright.ct-react.spec.ts               | 34 +++++++++++++++++
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/packages/playwright-ct-core/src/tsxTransform.ts b/packages/playwright-ct-core/src/tsxTransform.ts
index 0a61d4e3d9863e..d744821ed55c2d 100644
--- a/packages/playwright-ct-core/src/tsxTransform.ts
+++ b/packages/playwright-ct-core/src/tsxTransform.ts
@@ -74,28 +74,31 @@ export default declare((api: BabelAPI) => {
 
         const ext = path.extname(importNode.source.value);
 
-        // Convert all non-JS imports into refs.
-        if (!allJsExtensions.has(ext)) {
+        let importCount = 0;
+
+        if (jsxComponentNames.size) {
+          // Convert JS imports that are used as components in JSX expressions into refs.
           for (const specifier of importNode.specifiers) {
             if (t.isImportNamespaceSpecifier(specifier))
               continue;
             const { localName, info } = importInfo(importNode, specifier, this.filename!);
-            importInfos.set(localName, info);
+            if (jsxComponentNames.has(localName)) {
+              importInfos.set(localName, info);
+              ++importCount;
+            }
           }
-          p.skip();
-          p.remove();
-          return;
-        }
-
-        // Convert JS imports that are used as components in JSX expressions into refs.
-        let importCount = 0;
-        for (const specifier of importNode.specifiers) {
-          if (t.isImportNamespaceSpecifier(specifier))
-            continue;
-          const { localName, info } = importInfo(importNode, specifier, this.filename!);
-          if (jsxComponentNames.has(localName)) {
-            importInfos.set(localName, info);
-            ++importCount;
+        } else {
+          // Convert all non-JS imports into refs.
+          if (!allJsExtensions.has(ext)) {
+            for (const specifier of importNode.specifiers) {
+              if (t.isImportNamespaceSpecifier(specifier))
+                continue;
+              const { localName, info } = importInfo(importNode, specifier, this.filename!);
+              importInfos.set(localName, info);
+            }
+            p.skip();
+            p.remove();
+            return;
           }
         }
 
diff --git a/tests/playwright-test/playwright.ct-react.spec.ts b/tests/playwright-test/playwright.ct-react.spec.ts
index a92f8297f19a13..6f1780ce55dfa2 100644
--- a/tests/playwright-test/playwright.ct-react.spec.ts
+++ b/tests/playwright-test/playwright.ct-react.spec.ts
@@ -511,3 +511,37 @@ test('should allow props children', async ({ runInlineTest }) => {
   expect(result.exitCode).toBe(0);
   expect(result.passed).toBe(1);
 });
+
+test('should allow import from shared file', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightCtConfigText,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/component.tsx': `
+      export const Component = (props: { content: string }) => {
+        return <div>{props.content}</div>
+      };
+    `,
+    'src/component.shared.tsx': `
+      export const componentMock = { content: 'This is a content.' };
+    `,
+    'src/component.render.tsx': `
+      import {Component} from './component';
+      import {componentMock} from './component.shared';
+      export const ComponentTest = () => {
+        return <Component content={componentMock.content} />;
+      };
+    `,
+    'src/component.spec.tsx': `
+      import { expect, test } from '@playwright/experimental-ct-react';
+      import { ComponentTest } from './component.render';
+      import { componentMock } from './component.shared';
+      test('component renders', async ({ mount }) => {
+        const component = await mount(<ComponentTest />);
+        await expect(component).toContainText(componentMock.content)
+      })`
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});