feat(presets): add 3 new presets to work with ESM (#2207)

BREAKING CHANGE
- `create-jest-preset` util function signature has changed to
```
function createJestPreset(allowJs?: boolean, extraOptions?: Config.InitialOptions): TsJestPresets;
```

Author: ahnpnl

README.md

@@ -14,7 +14,7 @@
 
 <img src="./icon.png" align="right" title="ts-jest Logo" width="128" height="128">
 
-It supports all features of TypeScript including type-checking. [Read more about Babel7 + `preset-typescript` **vs** TypeScript (and `ts-jest`)](https://kulshekhar.github.io/ts-jest/user/babel7-or-ts).
+It supports all features of TypeScript including type-checking. [Read more about Babel7 + `preset-typescript` **vs** TypeScript (and `ts-jest`)](https://kulshekhar.github.io/ts-jest/docs/babel7-or-ts).
 
 ---
 

docs/docs/presets.md

@@ -3,15 +3,18 @@ id: presets
 title: Presets
 ---
 
-### The 3 presets
+### The presets
 
-`ts-jest` comes with 3 presets, covering most of the project's base configuration:
+`ts-jest` comes with several presets, covering most of the project's base configuration:
 
 | Preset name | Description |
 |---|---|
-| `ts-jest/presets/default`<br/>or `ts-jest` | `ts-jest` will take care of `.ts` and `.tsx` files only, leaving JavaScript files as-is. |
-| `ts-jest/presets/js-with-ts` | TypeScript and JavaScript files (`.ts`, `.tsx`, `.js` and `.jsx`) will be handled by `ts-jest`.<br/>You'll need to set `allowJs` to `true` in your `tsconfig.json` file. |
-| `ts-jest/presets/js-with-babel` | TypeScript files will be handled by `ts-jest`, and JavaScript files will be handled by `babel-jest`. |
+| `ts-jest/presets/default`<br/>or `ts-jest` | TypeScript files (`.ts`, `.tsx`) will be transformed by `ts-jest` to **CommonJS** syntax, leaving JavaScript files (`.js`, `jsx`) as-is. |
+| `ts-jest/presets/default-esm`<br/> | TypeScript files (`.ts`, `.tsx`) will be transformed by `ts-jest` to **ESM** syntax, leaving JavaScript files (`.js`, `jsx`) as-is. |
+| `ts-jest/presets/js-with-ts` | TypeScript and JavaScript files (`.ts`, `.tsx`, `.js`, `.jsx`) will be transformed by `ts-jest` to **CommonJS** syntax.<br/>You'll need to set `allowJs` to `true` in your `tsconfig.json` file. |
+| `ts-jest/presets/js-with-ts-esm` | TypeScript and JavaScript files (`.ts`, `.tsx`, `.js`, `.jsx`, `.mjs`) will be transformed by `ts-jest` to **ESM** syntax.<br/>You'll need to set `allowJs` to `true` in your `tsconfig.json` file. |
+| `ts-jest/presets/js-with-babel` | TypeScript files (`.ts`, `.tsx`) will be transformed by `ts-jest` to **CommonJS** syntax, and JavaScript files (`.js`, `jsx`) will be transformed by `babel-jest`. |
+| `ts-jest/presets/js-with-babel-esm` | TypeScript files (`.ts`, `.tsx`) will be transformed by `ts-jest` to **ESM** syntax, and JavaScript files (`.js`, `jsx`, `.mjs`) will be transformed by `babel-jest`. |
 
 ### Basic usage
 
@@ -27,7 +30,7 @@ module.exports = {
 };
 ```
 
-```js
+```json5
 // OR package.json
 {
   // [...]

e2e/__cases__/presets/ts-jest-presets.spec.ts

@@ -1,9 +1,41 @@
 // preset and utils should work all the time
 import * as presets from 'ts-jest/presets'
+import { JS_EXT_TO_TREAT_AS_ESM, TS_EXT_TO_TREAT_AS_ESM } from 'ts-jest/dist/constants'
 
 test('presets', () => {
-  const presetKeys = ['transform']
-  expect(Object.keys(presets.defaults)).toEqual(presetKeys)
-  expect(Object.keys(presets.jsWithBabel)).toEqual(presetKeys)
-  expect(Object.keys(presets.jsWithTs)).toEqual(presetKeys)
+  expect(presets.defaults).toEqual({
+    transform: {
+      '^.+\\.tsx?$': 'ts-jest',
+    },
+  })
+  expect(presets.defaultsESM).toEqual({
+    extensionsToTreatAsEsm: [...TS_EXT_TO_TREAT_AS_ESM],
+    transform: {
+      '^.+\\.tsx?$': 'ts-jest',
+    },
+  })
+  expect(presets.jsWithTs).toEqual({
+    transform: {
+      '^.+\\.[tj]sx?$': 'ts-jest',
+    },
+  })
+  expect(presets.jsWithTsESM).toEqual({
+    extensionsToTreatAsEsm: [...JS_EXT_TO_TREAT_AS_ESM, ...TS_EXT_TO_TREAT_AS_ESM],
+    transform: {
+      '^.+\\.m?[tj]sx?$': 'ts-jest',
+    },
+  })
+  expect(presets.jsWithBabel).toEqual({
+    transform: {
+      '^.+\\.tsx?$': 'ts-jest',
+      '^.+\\.jsx?$': 'babel-jest',
+    },
+  })
+  expect(presets.jsWithBabelESM).toEqual({
+    extensionsToTreatAsEsm: [...JS_EXT_TO_TREAT_AS_ESM, ...TS_EXT_TO_TREAT_AS_ESM],
+    transform: {
+      '^.+\\.tsx?$': 'ts-jest',
+      '^.+\\.m?[j]sx?$': 'babel-jest',
+    },
+  })
 })

e2e/__cases__/ts-jest-checks/index.spec.ts

@@ -1,34 +1,10 @@
-import { allValidPackageSets, PackageSets } from '../__helpers__/templates'
+import { PackageSets } from '../__helpers__/templates'
 import { configureTestCase } from '../__helpers__/test-case'
 
-// 'ts-jest' is tested in almost all test cases
-// 'ts-jest/presets/default' is an alias of the above
-// 'ts-jest/presets/js-with-ts' is tested in allow-js.test.ts
-
-describe('ts-jest/presets/js-with-babel', () => {
-  const testCase = configureTestCase('preset-with-babel', { jestConfig: { preset: 'ts-jest/presets/js-with-babel' } })
-
-  testCase.runWithTemplates([PackageSets.default], 1, (runTest, { testLabel }) => {
-    it(testLabel, () => {
-      const result = runTest()
-      expect(result.status).toBe(1)
-      expect(result.stderr).toMatch(/(Couldn't|Cannot) find (preset|module) ["']@babel\/preset-env["']/)
-    })
-  })
-
-  testCase.runWithTemplates([PackageSets.babel7, PackageSets.babel7StringConfig], 0, (runTest, { testLabel }) => {
-    it(testLabel, () => {
-      const result = runTest()
-      expect(result.status).toBe(0)
-      expect(result).toMatchSnapshot()
-    })
-  })
-})
-
 describe('ts-jest all presets', () => {
   const testCase = configureTestCase('presets')
 
-  testCase.runWithTemplates(allValidPackageSets, 0, (runTest, { testLabel }) => {
+  testCase.runWithTemplates([PackageSets.default], 0, (runTest, { testLabel }) => {
     it(testLabel, () => {
       const result = runTest()
       expect(result.status).toBe(0)

e2e/__tests__/__snapshots__/jest-presets.test.ts.snap

@@ -0,0 +1 @@
+module.exports = require('..').defaultsESM

e2e/__tests__/jest-presets.test.ts

@@ -1,20 +1,32 @@
+const { JS_EXT_TO_TREAT_AS_ESM, TS_EXT_TO_TREAT_AS_ESM } = require('../dist/constants')
 const { createJestPreset } = require('../dist/presets/create-jest-preset')
 
 module.exports = {
   get defaults() {
     return createJestPreset()
   },
+  get defaultsESM() {
+    return createJestPreset(false, { extensionsToTreatAsEsm: TS_EXT_TO_TREAT_AS_ESM })
+  },
   get jsWithTs() {
-    return createJestPreset({ allowJs: true })
+    return createJestPreset(true)
+  },
+  get jsWithTsESM() {
+    return createJestPreset(true, { extensionsToTreatAsEsm: [...JS_EXT_TO_TREAT_AS_ESM, ...TS_EXT_TO_TREAT_AS_ESM] })
   },
   get jsWithBabel() {
-    return createJestPreset(
-      { allowJs: false },
-      {
-        transform: {
-          '^.+\\.jsx?$': 'babel-jest',
-        },
-      }
-    )
+    return createJestPreset(false, {
+      transform: {
+        '^.+\\.jsx?$': 'babel-jest',
+      },
+    })
+  },
+  get jsWithBabelESM() {
+    return createJestPreset(false, {
+      extensionsToTreatAsEsm: [...JS_EXT_TO_TREAT_AS_ESM, ...TS_EXT_TO_TREAT_AS_ESM],
+      transform: {
+        '^.+\\.m?[j]sx?$': 'babel-jest',
+      },
+    })
   },
 }

e2e/__tests__/ts-jest-checks.test.ts

@@ -0,0 +1 @@
+module.exports = require('..').jsWithBabelESM