fix(tsconfig): remove TS_NODE envs, update docs (#17847)

References #17469.

docs/src/test-typescript-js.md

@@ -71,9 +71,28 @@ test('example', async ({ page }) => {
 TypeScript with ESM requires Node.js 16 or higher.
 :::
 
-## TypeScript path mapping
+## tsconfig.json
 
-If you use [path mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) in your `tsconfig.json`, Playwright Test will pick it up. Make sure that `baseUrl` is also set.
+Playwright will pick up `tsconfig.json` for each source file it loads. Note that Playwright **only supports** the following tsconfig options: `paths` and `baseUrl`.
+
+We recommend setting up a separate `tsconfig.json` in the tests directory so that you can change some preferences specifically for the tests. Here is an example directory structure.
+
+```
+src/
+    source.ts
+
+tests/
+    tsconfig.json  # test-specific tsconfig
+    example.spec.ts
+
+tsconfig.json  # generic tsconfig for all typescript sources
+
+playwright.config.ts
+```
+
+### tsconfig path mapping
+
+Playwright supports [path mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) declared in the `tsconfig.json`. Make sure that `baseUrl` is also set.
 
 Here is an example `tsconfig.json` that works with Playwright Test:
 

packages/playwright-test/src/third_party/tsconfig-loader.ts

@@ -31,7 +31,7 @@ import { json5 } from '../utilsBundle';
 /**
  * Typing for the parts of tsconfig that we care about
  */
-export interface Tsconfig {
+interface Tsconfig {
   extends?: string;
   compilerOptions?: {
     baseUrl?: string;
@@ -48,38 +48,23 @@ export interface TsConfigLoaderResult {
 }
 
 export interface TsConfigLoaderParams {
-  getEnv: (key: string) => string | undefined;
   cwd: string;
-  loadSync?(
-    cwd: string,
-    filename?: string,
-    baseUrl?: string
-  ): TsConfigLoaderResult;
 }
 
 export function tsConfigLoader({
-  getEnv,
   cwd,
-  loadSync = loadSyncDefault,
 }: TsConfigLoaderParams): TsConfigLoaderResult {
-  const TS_NODE_PROJECT = getEnv("TS_NODE_PROJECT");
-  const TS_NODE_BASEURL = getEnv("TS_NODE_BASEURL");
-
-  // tsconfig.loadSync handles if TS_NODE_PROJECT is a file or directory
-  // and also overrides baseURL if TS_NODE_BASEURL is available.
-  const loadResult = loadSync(cwd, TS_NODE_PROJECT, TS_NODE_BASEURL);
+  const loadResult = loadSyncDefault(cwd);
   loadResult.serialized = JSON.stringify(loadResult);
   return loadResult;
 }
 
 function loadSyncDefault(
   cwd: string,
-  filename?: string,
-  baseUrl?: string
 ): TsConfigLoaderResult {
   // Tsconfig.loadSync uses path.resolve. This is why we can use an absolute path as filename
 
-  const configPath = resolveConfigPath(cwd, filename);
+  const configPath = resolveConfigPath(cwd);
 
   if (!configPath) {
     return {
@@ -94,22 +79,13 @@ function loadSyncDefault(
   return {
     tsConfigPath: configPath,
     baseUrl:
-      baseUrl ||
       (config && config.compilerOptions && config.compilerOptions.baseUrl),
     paths: config && config.compilerOptions && config.compilerOptions.paths,
     serialized: undefined,
   };
 }
 
-function resolveConfigPath(cwd: string, filename?: string): string | undefined {
-  if (filename) {
-    const absolutePath = fs.lstatSync(filename).isDirectory()
-      ? path.resolve(filename, "./tsconfig.json")
-      : path.resolve(cwd, filename);
-
-    return absolutePath;
-  }
-
+function resolveConfigPath(cwd: string): string | undefined {
   if (fs.statSync(cwd).isFile()) {
     return path.resolve(cwd);
   }
@@ -137,7 +113,7 @@ export function walkForTsConfig(
   return walkForTsConfig(parentDirectory, existsSync);
 }
 
-export function loadTsconfig(
+function loadTsconfig(
   configFilePath: string,
   existsSync: (path: string) => boolean = fs.existsSync,
   readFileSync: (filename: string) => string = (filename: string) =>

packages/playwright-test/src/transform.ts

@@ -80,7 +80,6 @@ function loadAndValidateTsconfigForFile(file: string): ParsedTsConfigData | unde
   const cwd = path.dirname(file);
   if (!cachedTSConfigs.has(cwd)) {
     const loaded = tsConfigLoader({
-      getEnv: (name: string) => process.env[name],
       cwd
     });
     cachedTSConfigs.set(cwd, validateTsConfig(loaded));