kulshekhar / ts-jest

A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.
https://kulshekhar.github.io/ts-jest
MIT License
6.91k stars 452 forks source link

[Bug]: ESM Support "Use ESM Presets" documentation has confusing redundancy #4445

Open cortexcompiler opened 1 month ago

cortexcompiler commented 1 month ago

Version

29.2

Steps to reproduce

This is a documentation bug. The Use ESM presets section appears to have a redundant transform config in the example. Perhaps I am misunderstanding, but it looks like it was copied from the Manual configuration section.

From looking at the ts-jest/presets/default-esm preset code, it seems to essentially resolve to:

{
    extensionsToTreatAsEsm: ['.jsx', '.ts', '.tsx', '.mts'],
    transform: {
      ['^.+\\.m?tsx?$']: [
        'ts-jest',
        {
          useESM: true,
        },
      ],
    },
  }

This makes me question why the example that uses this default also includes:

  transform: {
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        useESM: true,
      },
    ],
  },

If I am not mistaken I would be happy to make the updates to: https://github.com/kulshekhar/ts-jest/blob/main/website/docs/guides/esm-support.md

Expected behavior

I would expect the example configs to look like this:

const jestConfig: JestConfigWithTsJest = {
  // [...]
  preset: 'ts-jest/presets/default-esm', // or other ESM presets
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1',
  },
}

Actual behavior

The example configs look like:

const jestConfig: JestConfigWithTsJest = {
  // [...]
  preset: 'ts-jest/presets/default-esm', // or other ESM presets
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1',
  },
  transform: {
    // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest`
    // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest`
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        useESM: true,
      },
    ],
  },
}

Debug log

N/A

Additional context

No response

Environment

N/A
ahnpnl commented 1 month ago

PR is welcome

You should use utility functions like createDefaultEsmPreset for the example codes in the documentation.

const { createDefaultEsmPreset } = require('ts-jest');

const defaultEsmPreset = createDefaultEsmPreset({
   // some options
});

module.exports = {
    ...defaultEsmPreset
}

I'm working on #4433 to adjust the preset page to inform about switching to use utility functions as best practices