Jest cannot import modules from TypeScript ESM path mapping

Question

I'm trying to set a path mapping for the src folder and for some reason in my jest test file it is not being resolved.

This is my project structure:

app-esm/
├── __test__/
│   └── index.test.ts
├── src/
│   └── index.ts
├── jest.config.ts
├── package.json
└── tsconfig.json

Here my config:

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@App/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "./*.ts", "__test__"]
}

jest.config.ts

import type { JestConfigWithTsJest } from "ts-jest";

const config: JestConfigWithTsJest = {
  verbose: true,
  transform: {
    "^.+\\.ts?$": [
      "ts-jest",
      {
        useESM: true,
      },
    ],
  },
  extensionsToTreatAsEsm: [".ts"],
  moduleNameMapper: {
    "@App/(.*)": "<rootDir>/src/$1",
  },
};

export default config;

index file

export const run = () => "hello, there!";

test file

import { run } from "@App/index";

test("index", () => {
  expect(run()).toBe("hello, there!");
});

What config is missing here?

You can check out this repo to reproduce the issue.

p.s importing without the path mapping works perfectly. I just need to remove the path config from tsconfig and replace the moduleNameMapper @App by "^(\\.{1,2}/.*)\\.js$": "$1".

Remove extensionsToTreatAsEsm. Change transform to transform: {'^.+\\.(t|j)s$': 'ts-jest',},. Let me know if that works. — Robin Thomas
– Robin Thomas, Commented Aug 28, 2023 at 23:23
The issue persists, it is saying: Cannot find module '@App/index' or its corresponding type declarations.. Even though the test is passing.... — manga
– manga, Commented Aug 29, 2023 at 18:00
added this repo to reproduce the issue: github.com/manganellidev/dev.to/tree/main/app-esm-jest-issue — manga
– manga, Commented Aug 29, 2023 at 18:19

Nimantha · Accepted Answer · 2023-11-14 15:27:12Z

Here is what I did:

Splitted tsconfig into two files:

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@App/*": ["src/*"]
    }
  }
}

tsconfig.build.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "rootDir": "./"
  },
  "exclude": ["./*.ts", "__test__"]
}

Installed path-alias dependency and adjusted the scripts:

{
  ...
  "scripts": {
    "build": "tsc --project tsconfig.build.json",
    "test": "node --experimental-vm-modules node_modules/.bin/jest",
    "dev": "tsx src/index.ts",
    "start": "node --loader @bleed-believer/path-alias ./dist/src/index.js"
  },
  "dependencies": {
    "@bleed-believer/path-alias": "^0.15.2"
  }
  ...

Adjusted the moduleNameMapper:

import type { JestConfigWithTsJest } from "ts-jest";

const config: JestConfigWithTsJest = {
  verbose: true,
  transform: {
    "^.+\\.(t|j)s$": [
      "ts-jest",
      {
        useESM: true,
      },
    ],
  },
  extensionsToTreatAsEsm: [".ts"],
  moduleNameMapper: {
    "^@App/(.*)\\.js$": "<rootDir>/src/$1",
  },
};

export default config;

You can check the repo as well.

Robin Thomas · Accepted Answer · 2023-08-30 00:02:47Z

0

You can fix your issue by following the below steps.

Update your jest.config.ts to what's shown below:

import type { JestConfigWithTsJest } from "ts-jest";

const config: JestConfigWithTsJest = {
  verbose: true,
  transform: {
    '^.+\\.(t|j)s$': ['ts-jest', {
      tsconfig: './tsconfig.test.json',
      useESM: true,
    }],
  },
  moduleNameMapper: {
    "@App/main/main": "<rootDir>/src/main/main",
    "@App/(.*)": "<rootDir>/src/$1",
  },
  preset: "ts-jest/presets/default-esm",
};

export default config;

There are two fixes here. One for moduleNameMapper and other for preset to use the ESM.

We shall also use a new tsconfig.test.json for jest, which shall be explained in next step.

I have created a new tsconfig.test.json (because in your existing tsconfig.json, I see that you had excluded __test__.

{
  "extends": "./tsconfig.json",
  "include": ["__test__"]
}

On running npm run test, you get the below output:

> [email protected] test
> node --experimental-vm-modules node_modules/.bin/jest

(node:12578) ExperimentalWarning: VM Modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 PASS  __test__/main/main.test.ts
  ✓ main (1 ms)

  console.log
    Hello, Mock!

      at src/index.ts:3:9

  console.log
    Hello, Mock namedExport!

      at src/index.ts:4:9

 PASS  __test__/index.test.ts
  ✓ main (11 ms)

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.169 s, estimated 1 s
Ran all test suites.

answered Aug 30, 2023 at 0:02

Robin Thomas

4,3262 gold badges19 silver badges31 bronze badges

2 Comments

manga Over a year ago

thanks @Robin, it is working indeed. Although the import cannot be resolved... it keeps showing this error: Cannot find module '@App/main/main' or its corresponding type declarations.. any idea?

Robin Thomas Over a year ago

@manga I don't get any error while running jest. I had shared the output from jest above. Are you sure you used the exact same files I shared in my answer?

Collectives™ on Stack Overflow

Jest cannot import modules from TypeScript ESM path mapping

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related