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

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

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

@@ -75,7 +75,7 @@ export default declare((api: BabelAPI) => {
         const ext = path.extname(importNode.source.value);
 
         // Convert all non-JS imports into refs.
-        if (!allJsExtensions.has(ext)) {
+        if (artifactExtensions.has(ext)) {
           for (const specifier of importNode.specifiers) {
             if (t.isImportNamespaceSpecifier(specifier))
               continue;
@@ -171,4 +171,29 @@ export function importInfo(importNode: T.ImportDeclaration, specifier: T.ImportS
   return { localName: specifier.local.name, info: result };
 }
 
-const allJsExtensions = new Set(['.js', '.jsx', '.cjs', '.mjs', '.ts', '.tsx', '.cts', '.mts', '']);
+const artifactExtensions = new Set([
+  // Frameworks
+  '.vue',
+  '.svelte',
+
+  // Images
+  '.jpg', '.jpeg',
+  '.png',
+  '.gif',
+  '.svg',
+  '.bmp',
+  '.webp',
+  '.ico',
+
+  // CSS
+  '.css',
+
+  // Fonts
+  '.woff', '.woff2',
+  '.ttf',
+  '.otf',
+  '.eot',
+
+  // Other assets
+  '.json',
+]);

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