fix(cfg): load jest.config.ts with TS loader specified in docblock pragma (#15839)

Author: hainenber

CHANGELOG.md

@@ -12,6 +12,7 @@
 ### Fixes
 
 - `[babel-jest]` Export the `TransformerConfig` interface ([#15820](https://github.com/jestjs/jest/pull/15820))
+- `[jest-config]` Fix `jest.config.ts` with TS loader specified in docblock pragma ([#15839](https://github.com/jestjs/jest/pull/15839))
 
 ## 30.1.3
 

e2e/__tests__/__snapshots__/jest.config.ts.test.ts.snap

@@ -45,6 +45,19 @@ jest.config.ts(1,17): error TS1005: ';' expected.
 jest.config.ts(1,39): error TS1002: Unterminated string literal."
 `;
 
+exports[`on node ^23.6 load typed jest.config.ts with TS loader specified in docblock pragma 1`] = `
+"PASS __tests__/a-giraffe.js
+  ✓ giraffe"
+`;
+
+exports[`on node ^23.6 load typed jest.config.ts with TS loader specified in docblock pragma 2`] = `
+"Test Suites: 1 passed, 1 total
+Tests:       1 passed, 1 total
+Snapshots:   0 total
+Time:        <<REPLACED>>
+Ran all test suites."
+`;
+
 exports[`traverses directory tree up until it finds jest.config 1`] = `
 "  console.log
 <<REPLACED>>/jest-config-ts/some/nested/directory

e2e/__tests__/jest.config.ts.test.ts

@@ -176,6 +176,29 @@ onNodeVersions('^23.6', () => {
     ).toMatchSnapshot();
     expect(exitCode).toBe(1);
   });
+
+  test('load typed jest.config.ts with TS loader specified in docblock pragma', () => {
+    writeFiles(DIR, {
+      '__tests__/a-giraffe.js': "test('giraffe', () => expect(1).toBe(1));",
+      'foo.ts': 'export const a = () => {};',
+      'jest.config.ts': `
+        /** @jest-config-loader ts-node */
+        import { a } from './foo'
+        a();
+        import type {Config} from 'jest';
+        const config: Config = { testTimeout: 10000 };
+        export default config;
+      `,
+      'package.json': '{}',
+    });
+    const {stderr, exitCode} = runJest(DIR, ['-w=1', '--ci=false'], {
+      nodeOptions: '--no-warnings',
+    });
+    const {rest, summary} = extractSummary(stderr);
+    expect(exitCode).toBe(0);
+    expect(rest).toMatchSnapshot();
+    expect(summary).toMatchSnapshot();
+  });
 });
 
 onNodeVersions('>=24', () => {

packages/jest-config/package.json

@@ -61,6 +61,7 @@
     "strip-json-comments": "^3.1.1"
   },
   "devDependencies": {
+    "@jest/test-utils": "workspace:*",
     "@types/graceful-fs": "^4.1.9",
     "@types/micromatch": "^4.0.9",
     "@types/parse-json": "^4.0.2",

packages/jest-config/src/__tests__/readConfigFileAndSetRootDir.test.ts

@@ -9,6 +9,7 @@ import path from 'path';
 import * as fs from 'graceful-fs';
 import {requireOrImportModule} from 'jest-util';
 import readConfigFileAndSetRootDir from '../readConfigFileAndSetRootDir';
+import {onNodeVersions} from '@jest/test-utils';
 
 jest.mock('graceful-fs').mock('jest-util');
 
@@ -167,3 +168,23 @@ describe('readConfigFileAndSetRootDir', () => {
     });
   });
 });
+
+onNodeVersions('^24', () => {
+  describe('TypeScript file', () => {
+    test('reaches into 2nd loadout by TS loader if specified in docblock', async () => {
+      jest
+        .mocked(requireOrImportModule)
+        .mockRejectedValueOnce(new Error('Module not found'));
+      jest.mocked(fs.readFileSync).mockReturnValue(`
+        /** @jest-config-loader tsx */
+        export { testTimeout: 1_000 }
+      `);
+      const rootDir = path.resolve('some', 'path', 'to');
+      await expect(
+        readConfigFileAndSetRootDir(path.join(rootDir, 'jest.config.ts')),
+      ).rejects.toThrow(
+        /Module not found\n.*'tsx' is not a valid TypeScript configuration loader./,
+      );
+    });
+  });
+});

packages/jest-config/src/__tests__/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../../../tsconfig.test.json",
   "include": ["./**/*"],
-  "references": [{"path": "../../"}]
+  "references": [{"path": "../../"}, {"path": "../../../test-utils"}]
 }

packages/jest-config/src/readConfigFileAndSetRootDir.ts

@@ -11,7 +11,7 @@ import * as fs from 'graceful-fs';
 import parseJson from 'parse-json';
 import stripJsonComments from 'strip-json-comments';
 import type {Config} from '@jest/types';
-import {extract, parse} from 'jest-docblock';
+import {type Pragmas, extract, parse} from 'jest-docblock';
 import {interopRequireDefault, requireOrImportModule} from 'jest-util';
 import {
   JEST_CONFIG_EXT_CTS,
@@ -47,10 +47,15 @@ export default async function readConfigFileAndSetRootDir(
           configObject = await requireOrImportModule<any>(configPath);
         } catch (requireOrImportModuleError) {
           if (!(requireOrImportModuleError instanceof SyntaxError)) {
-            throw requireOrImportModuleError;
+            if (!hasTsLoaderExplicitlyConfigured(configPath)) {
+              throw requireOrImportModuleError;
+            }
           }
           try {
-            // Likely ESM in a file interpreted as CJS, which means it needs to be
+            // There are various reasons of failed loadout of Jest config in Typescript:
+            // 1. User has specified a TypeScript loader in the docblock and
+            // desire non-native compilation (https://github.com/jestjs/jest/issues/15837)
+            // 2. Likely ESM in a file interpreted as CJS, which means it needs to be
             // compiled. We ignore the error and try to load it with a loader.
             configObject = await loadTSConfigFile(configPath);
           } catch (loadTSConfigFileError) {
@@ -120,11 +125,22 @@ export default async function readConfigFileAndSetRootDir(
 // Load the TypeScript configuration
 let extraTSLoaderOptions: Record<string, unknown>;
 
+const hasTsLoaderExplicitlyConfigured = (configPath: string): boolean => {
+  const docblockPragmas = loadDocblockPragmasInConfig(configPath);
+  const tsLoader = docblockPragmas['jest-config-loader'];
+  return !Array.isArray(tsLoader) && (tsLoader ?? '').trim() !== '';
+};
+
+const loadDocblockPragmasInConfig = (configPath: string): Pragmas => {
+  const docblockPragmas = parse(extract(fs.readFileSync(configPath, 'utf8')));
+  return docblockPragmas;
+};
+
 const loadTSConfigFile = async (
   configPath: string,
 ): Promise<Config.InitialOptions> => {
   // Get registered TypeScript compiler instance
-  const docblockPragmas = parse(extract(fs.readFileSync(configPath, 'utf8')));
+  const docblockPragmas = loadDocblockPragmasInConfig(configPath);
   const tsLoader = docblockPragmas['jest-config-loader'] || 'ts-node';
   const docblockTSLoaderOptions = docblockPragmas['jest-config-loader-options'];
 

packages/jest-docblock/src/index.ts

@@ -8,7 +8,7 @@
 import {EOL} from 'os';
 import detectNewline from 'detect-newline';
 
-type Pragmas = Record<string, string | Array<string>>;
+export type Pragmas = Record<string, string | Array<string>>;
 
 const commentEndRe = /\*\/$/;
 const commentStartRe = /^\/\*\*?/;

yarn.lock

@@ -13588,6 +13588,7 @@ __metadata:
     "@jest/get-type": "workspace:*"
     "@jest/pattern": "workspace:*"
     "@jest/test-sequencer": "workspace:*"
+    "@jest/test-utils": "workspace:*"
     "@jest/types": "workspace:*"
     "@types/graceful-fs": "npm:^4.1.9"
     "@types/micromatch": "npm:^4.0.9"