如何使 ts-jest 使用在我的导入中导入的 js 文件的导入/导出语法？

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)/)' 
    ]
}