diff --git a/docs/src/test-typescript-js.md b/docs/src/test-typescript-js.md index 83b0d7449d..7d29694d5e 100644 --- a/docs/src/test-typescript-js.md +++ b/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: diff --git a/packages/playwright-test/src/third_party/tsconfig-loader.ts b/packages/playwright-test/src/third_party/tsconfig-loader.ts index 348c4a620d..d1cf7bda47 100644 --- a/packages/playwright-test/src/third_party/tsconfig-loader.ts +++ b/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) => diff --git a/packages/playwright-test/src/transform.ts b/packages/playwright-test/src/transform.ts index 35cbb2b1a5..a9c3925f8f 100644 --- a/packages/playwright-test/src/transform.ts +++ b/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));