ES Module 'import' syntax with .ts extension

[koonfoon]

Hi, how to make ts-jest to work with ESmodule import syntax with .ts extension. Example like:

// Inside (projectRoot)/__tests__/someSourceCode.test.ts

import { someFunction } from '../src/someSourceCode.ts'

I explicitly installed ts-jest@27.0.0-next.3 and jest@27.0.0-next.2, and run node --experimental-vm-modules node_modules/jest/bin/jest.js --detectOpenHandles --forceExit. But still wouldn't work. Here is my GitHub repo created for trying fix the issue, it resembling my actual project.
Below are the some config files look like:

// Inside jest.config.js

export default {
    roots: ['<rootDir>/src', '<rootDir>'],
    testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
    transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest',
    },
    preset: 'ts-jest/presets/default-esm',
    testEnvironment: 'node',
    globals: {
        'ts-jest': {
            useESM: true,
        },
    },
};

// Inside tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",                          
    "module": "ESNEXT",                    
    "allowJs": true,
    "moduleResolution": "node",            
    "esModuleInterop": true,      
    "skipLibCheck": true,                    
    "forceConsistentCasingInFileNames": true 
  },
  "include": ["./src"],
  "exclude": ["node_modules", "**/*.test.ts"]
}

Thank you.

[ahnpnl]

would you please try with next-9?

[koonfoon]

• All the examples and tutorials I found online (here, and here) about Typescript with ES Modules import with .js extension, not .ts
• So, for what I can get from our discussion is: normal .ts file is allowed to import with extension, but .test.ts file isn't (because ES Modules is still experimental for jest?)
• I found someone posted a very similar error to mine on https://stackoverflow.com/questions/66465339/how-to-make-ts-jest-work-with-import-export-syntax-of-the-js-files-that-are-bein/66480267#. I followed his solution, but I get this error:

 FAIL  src/bar.test.ts
  ● Test suite failed to run

    Cannot find module './foo.js' from 'src/bar.ts'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:311:11)
          at async Promise.all (index 0)

• foo.ts, bar.ts and bar.tes.ts are in the same src/ directory.

[ahnpnl]

In general you can't import with ts extension. It is nothing related to ESM, it is just TypeScript error. I tested with a plain project with only TypeScript setup and typescript never allows ts in the import path.

You should not use .ts extension in import path, it should be only .js extension.

The error about at Resolver.resolveModule is Jest resolver error, which is related to jest-resolve because Jest can't resolve the file.

[koonfoon]

About error for at Resolver.resolveModule, if you don't mind, can you provide the solution? Thank you.

[ahnpnl]

You can solve that by configuring moduleNameMapper or create a Jest custom resolver. You can find information about them in Jest documentation.

[koonfoon]

I ended up something like this

 moduleNameMapper: {
      "@src/(.*).js": [
        "<rootDir>/src/$1"
      ]
    }

It will work for now, until Typescript allow import with extension