fix(esm): allow importing ts from esm (#16735)

packages/playwright-test/src/cli.ts

@@ -239,8 +239,6 @@ function restartWithExperimentalTsEsm(configFile: string | null): boolean {
     return false;
   if (process.env.PW_TS_ESM_ON)
     return false;
-  if (!configFile.endsWith('.ts'))
-    return false;
   if (!fileIsModule(configFile))
     return false;
   const NODE_OPTIONS = (process.env.NODE_OPTIONS || '') + ` --experimental-loader=${url.pathToFileURL(require.resolve('@playwright/test/lib/experimentalLoader')).toString()}`;

packages/playwright-test/src/transform.ts

@@ -97,9 +97,7 @@ export function resolveHook(filename: string, specifier: string): string | undef
   if (builtins.has(specifier))
     return;
   const isTypeScript = filename.endsWith('.ts') || filename.endsWith('.tsx');
-  if (!isTypeScript)
-    return;
-  const tsconfig = loadAndValidateTsconfigForFile(filename);
+  const tsconfig = isTypeScript ? loadAndValidateTsconfigForFile(filename) : undefined;
   if (tsconfig && !isRelativeSpecifier(specifier)) {
     let longestPrefixLength = -1;
     let pathMatchedByLongestPrefix: string | undefined;

tests/playwright-test/loader.spec.ts

@@ -216,7 +216,9 @@ test('should load esm config files', async ({ runInlineTest }) => {
   expect(result.passed).toBe(1);
 });
 
-test('should fail to load ts from esm when package.json has type module', async ({ runInlineTest }) => {
+test('should load ts from esm when package.json has type module', async ({ runInlineTest, nodeVersion }) => {
+  // We only support experimental esm mode on Node 16+
+  test.skip(nodeVersion.major < 16);
   const result = await runInlineTest({
     'playwright.config.js': `
       //@no-header
@@ -225,19 +227,24 @@ test('should fail to load ts from esm when package.json has type module', async
     `,
     'package.json': JSON.stringify({ type: 'module' }),
     'a.test.js': `
-      import { foo } from './b.ts';
-      const { test } = pwt;
+      //@no-header
+      import { test, expect } from '@playwright/test';
+      import { bar } from './bar.js';
       test('check project name', ({}, testInfo) => {
         expect(testInfo.project.name).toBe('foo');
       });
     `,
-    'b.ts': `
+    'bar.ts': `
+      import { foo } from './foo.js';
+      export const bar = foo;
+    `,
+    'foo.ts': `
       export const foo: string = 'foo';
     `
   });
 
-  expect(result.exitCode).toBe(1);
-  expect(result.output).toContain('Unknown file extension ".ts"');
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
 });
 
 test('should filter stack trace for simple expect', async ({ runInlineTest }) => {