fix(ct): stop-gap for shared file import

Author: pavelfeldman

packages/playwright-ct-core/src/tsxTransform.ts

@@ -74,33 +74,34 @@ export default declare((api: BabelAPI) => {
 
         const ext = path.extname(importNode.source.value);
 
-        // Convert all non-JS imports into refs.
-        if (!allJsExtensions.has(ext)) {
+        if (jsxComponentNames.size) {
+          let importCount = 0;
+          // 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;
+            }
+          }
+          // All the imports were from JSX => delete.
+          if (importCount && importCount === importNode.specifiers.length) {
+            p.skip();
+            p.remove();
           }
-          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)) {
+        // 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);
-            ++importCount;
           }
-        }
-
-        // All the imports were from JSX => delete.
-        if (importCount && importCount === importNode.specifiers.length) {
           p.skip();
           p.remove();
         }

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