diff --git a/packages/playwright-ct-core/src/tsxTransform.ts b/packages/playwright-ct-core/src/tsxTransform.ts
index 0a61d4e3d9..ab33c114ba 100644
--- a/packages/playwright-ct-core/src/tsxTransform.ts
+++ b/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',
+]);
\ No newline at end of file
diff --git a/packages/playwright/src/matchers/toMatchSnapshot.ts b/packages/playwright/src/matchers/toMatchSnapshot.ts
index 80e602f5ad..449c7349f0 100644
--- a/packages/playwright/src/matchers/toMatchSnapshot.ts
+++ b/packages/playwright/src/matchers/toMatchSnapshot.ts
@@ -22,7 +22,7 @@ import { getComparator, sanitizeForFilePath, zones } from 'playwright-core/lib/u
 import {
   addSuffixToFilePath,
   trimLongString, callLogText,
-  expectTypes  } from '../util';
+  expectTypes } from '../util';
 import { colors } from 'playwright-core/lib/utilsBundle';
 import fs from 'fs';
 import path from 'path';
@@ -91,7 +91,6 @@ class SnapshotHelper {
     testInfo: TestInfoImpl,
     matcherName: string,
     locator: Locator | undefined,
-    snapshotPathResolver: (...pathSegments: string[]) => string,
     anonymousSnapshotExtension: string,
     configOptions: ToHaveScreenshotConfigOptions,
     nameOrOptions: NameOrSegments | { name?: NameOrSegments } & ToHaveScreenshotOptions,
@@ -165,7 +164,7 @@ class SnapshotHelper {
     // sanitizes path if string
     const inputPathSegments = Array.isArray(name) ? name : [addSuffixToFilePath(name, '', undefined, true)];
     const outputPathSegments = Array.isArray(name) ? name : [addSuffixToFilePath(name, actualModifier, undefined, true)];
-    this.snapshotPath = snapshotPathResolver(...inputPathSegments);
+    this.snapshotPath = testInfo.snapshotPath(...inputPathSegments);
     const inputFile = testInfo._getOutputPath(...inputPathSegments);
     const outputFile = testInfo._getOutputPath(...outputPathSegments);
     this.legacyExpectedPath = addSuffixToFilePath(inputFile, '-expected');
@@ -304,10 +303,10 @@ export function toMatchSnapshot(
   if (testInfo._configInternal.ignoreSnapshots)
     return { pass: !this.isNot, message: () => '', name: 'toMatchSnapshot', expected: nameOrOptions };
 
+  const configOptions = testInfo._projectInternal.expect?.toMatchSnapshot || {};
   const helper = new SnapshotHelper(
-      testInfo, 'toMatchSnapshot', undefined, testInfo.snapshotPath.bind(testInfo), determineFileExtension(received),
-      testInfo._projectInternal.expect?.toMatchSnapshot || {},
-      nameOrOptions, optOptions);
+      testInfo, 'toMatchSnapshot', undefined, determineFileExtension(received),
+      configOptions, nameOrOptions, optOptions);
 
   if (this.isNot) {
     if (!fs.existsSync(helper.snapshotPath))
@@ -362,10 +361,7 @@ export async function toHaveScreenshot(
   expectTypes(pageOrLocator, ['Page', 'Locator'], 'toHaveScreenshot');
   const [page, locator] = pageOrLocator.constructor.name === 'Page' ? [(pageOrLocator as PageEx), undefined] : [(pageOrLocator as Locator).page() as PageEx, pageOrLocator as Locator];
   const configOptions = testInfo._projectInternal.expect?.toHaveScreenshot || {};
-  const snapshotPathResolver = testInfo.snapshotPath.bind(testInfo);
-  const helper = new SnapshotHelper(
-      testInfo, 'toHaveScreenshot', locator, snapshotPathResolver, 'png',
-      configOptions, nameOrOptions, optOptions);
+  const helper = new SnapshotHelper(testInfo, 'toHaveScreenshot', locator, 'png', configOptions, nameOrOptions, optOptions);
   if (!helper.snapshotPath.toLowerCase().endsWith('.png'))
     throw new Error(`Screenshot name "${path.basename(helper.snapshotPath)}" must have '.png' extension`);
   expectTypes(pageOrLocator, ['Page', 'Locator'], 'toHaveScreenshot');
diff --git a/tests/playwright-test/playwright.ct-react.spec.ts b/tests/playwright-test/playwright.ct-react.spec.ts
index a92f8297f1..6f1780ce55 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);
+});