How to make ts-jest work with import/export syntax of the js files that are being imported in my imports?

Question

jest fails to import the import of my import which is causing npm run test command to fail with SyntaxError: Unexpected token 'export' at first line of my bar.ts file. For this example foo.js is a local file, not a node module. I can change foo.js to foo.ts and change the import in bar.ts but that is not the solution.

Files in my src folder:

• foo.js:

export const magicNumber = 42; 

• bar.ts:

import { magicNumber } from './foo.js';

export const secondMagicNumber = magicNumber / 2; 

• bar.test.ts:

import { secondMagicNumber } from './bar';
import assert from 'assert';

it('should work', function() {
    assert.strictEqual(secondMagicNumber, 21);
});

Files in the root folder:

• jest.config.js:

export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

• package.json:

{
  "name": "testing-with-jest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^26.0.20",
    "jest": "^26.6.3",
    "ts-jest": "^26.5.2",
    "typescript": "^4.2.2"
  },
  "type": "module"
}

• tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",                         
    "module": "ESNext",                    
    "outDir": "./dist",                                       
    "strict": true,                          
    "esModuleInterop": true,                  
    "skipLibCheck": true,                     
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "moduleResolution": "node"
  },
  "include": ["./src/**/*.ts"]
}

Answer 1

So the problem is that both ts-jest and jest are tricky to set up for the ES6 import/export syntax. I did exactly that by:

1. Installing both jest and ts-jest >= 27.0.0 versions.
2. Using this minimal config:

tsconfig.json:

{
  "compilerOptions": {                    
    "esModuleInterop": true, 
    "allowJs": true                
  }
}

jest.config.ts:

export default {
    globals: {
        extensionsToTreatAsEsm: ['.ts', '.js'],
        'ts-jest': {
            useESM: true
        }
    },

    preset: 'ts-jest/presets/js-with-ts-esm',

    // from https://stackoverflow.com/a/57916712/15076557
    transformIgnorePatterns: [
        'node_modules/(?!(module-that-needs-to-be-transformed)/)' 
    ]
}